html - CSS 変換が機能しないのはなぜですか?

ロゴにクールな「影」を付けたいです。カーソルを合わせると表示されますが、機能しません。ある種の境界線を追加して、上にマウスを置いたときに境界線のみが表示されるようにし、z-index: -1; を使用して、境界線の代わりにロゴが表示され、上にマウスを置くと変形して表示されます。ロゴを使用すると、境界線が横に来ますが、機能しません。

HTML

<footer>
    <ul class = "bottom">
        <li><a href = "https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a> 
        </li>
        <li><a href = "#" target="_blank"><i class = "fa fa-twitter"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-youtube"></i></a></li>
        <li><a href = "#" target="_blank"><i class = "fa fa-instagram"></i></a></li>
    </ul>
</footer>

CSS

footer{
   width: 100%;
   display: block;
   padding: 50px 0;
   background-color: #262626;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}

.bottom{
   list-style: none;
   display: flex;
}

.bottom li{
   position: relative;
   display: block;
   font-size: 30px;
   height: 60px;
   width: 60px;
   border-radius: 50%;
   background: black;
   line-height: 60px;
   margin: 0 15px;
   cursor: pointer;
}

.bottom li a{
   color: #666;
}

.bottom li:before{
   position: absolute;
   content: '';
   top: 0;
   left: 0;
   background: #d35400;
   height: 100%;
   width: 100%;
   border-radius: 50%;
   z-index: -1;
   transition: .5s;
   transform: scale(0.9);
}

.bottom li a:hover:before{
   transform: scale(1.2);
   box-shadow: 0 0 15px #d35400;
}

------------------------

最終結果を正確に理解するのは難しいですが、これに近いでしょうか?

* {
  box-sizing: border-box;
}

footer {
  width: 100%;
  display: block;
  padding: 50px 0;
  background-color: #262626;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bottom {
  list-style: none;
  display: flex;
}

.bottom li {
  position: relative;
  display: flex;
  font-size: 30px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: black;
  line-height: 60px;
  margin: 0 15px;
  transition: all 0.2s ease;
  cursor: pointer;
  justify-content: center;
  align-items: center;
}

.bottom li a {
  color: #666;
  display: flex;
  text-decoration: none;
}

.bottom li:hover {
  transform: scale(1.2);
  box-shadow: 0 0 15px #d35400;
  border: 2px solid #d35400;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<footer>
  <ul class="bottom">
    <li><a href="https://www.facebook.com" target="_blank"><i class = "fa fa-facebook"></i></a>
    </li>
    <li><a href="" target="_blank"><i class = "fa fa-twitter"></i></a></li>
    <li><a href="" target="_blank"><i class = "fa fa-youtube"></i></a></li>
    <li><a href="" target="_blank"><i class = "fa fa-instagram"></i></a></li>
  </ul>
</footer>

------------------------

スタイルは .bottom li::before { にあります。したがって、 .bottom li はホバー時にトリガーするものです。

.bottom li:hover{
 transform: scale(1.2);
 box-shadow: 0 0 15px #d35400;
}

https://jsfiddle.net/42w7hgo6/3/

.footer には 2 つの表示があり、CSS3 の前には ::before という 2 つのコロンがあることに注意してください。

2

これは近いですが、私が望むものではありません。境界線の内側にある色、境界線の代わりに外側に欲しい色ですボックスシャドウです。次に、内側のロゴ (f、youtube、twitter) もホバー時に明るくなるようにしてみます。

– アルティン I. シレジマニ

2020 年 9 月 3 日 12:06

リンクを更新しました。よくわからないので、ボックス内のオレンジ色を削除しました。ロゴを明るくしたいですか?ロゴに白を追加しました。

– ニクラスF

2020 年 9 月 3 日 12:31

------------------------

これは、ホバー付きのボックスシャドウを使用します。したがって、ボックスの上にマウスを置くと、ボックスがハイライト表示されます。

CSS

.bottom {
  transition: box-shadow .3s;
  width: 300px;
  height: 500px;
  margin: 50px;
  border-radius:10px;
  border: 1px solid #ccc;
  background: #fff;
  float: left;
}

.bottom:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

例: https://codepen.io/ovdojoey/pen/BomKyZ

共有 この回答を改善します フォローする 編集

2020 年 10 月 22 日 3:08

2020 年 9 月 3 日 12:03 に回答

ヴィオ K

ヴィオ K

9

1

銅バッジ 1 個

2

2

コードを投稿するときは、可能な限りスニペットを使用してください。これは見た目がはるかにすっきりしており、使用するプログラムにコピーしてそこで実行する代わりに、この Web サイト内のコードを実行することもできます。

– ラモン・ド・フリース

2020 年 9 月 3 日 12:06

わかりました、わかりました。 StackOverflow で回答するのはこれが初めてです

– Vio K

2020 年 10 月 22 日 3:01