1
Is there a way to use two CSS3 box shadows on one element?を読んだ後、2つのボックスシャドウを1つのクラスに適用する方法を考え出しました。しかし、私はこれらの2つのボックスシャドウを別々に操作したいが、それらを同じ要素に適用したい。私は仕切りと2つの別々のクラスを使ってみましたが、それは正しい結果をもたらしませんでした。1つの要素に複数のボックスシャドウがあり、設定が異なる
具体的には、私がしようとしていることは次のとおりです。 ホバーでは、アイコンを拡大して境界線をフェードインします。少し遅れて、脈動するエフェクトを開始します。ボーダーはまだオンです。カーソルを離すと、すべてのエフェクトがフェードアウトし、アイコンのサイズが標準サイズになります。 JSFiddle
.nav img {
transition: 0.3s ease;
margin-left: 30px;
margin-right: 30px; }
.nav img:hover {
transform: scale(1.2,1.2);
-webkit-animation: pulsate 2.0s ease-out 0.3s infinite;
border-radius: 50%;
transition: 0.3s ease; }
@-webkit-keyframes pulsate {
0% {box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.4), 0 0 0 6px rgba(255, 255, 255, 0.4);}
50% {box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.0), 0 0 0 6px rgba(255, 255, 255, 0.4);}
100% {box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.0), 0 0 0 6px rgba(255, 255, 255, 0.4);}}
だから私は二つの問題を抱えています。 最初は、エフェクト全体が同時に楽になるということですが、内側の境界が最初に消えてしまいます。私は、より多くのキーフレームを追加し、脈動効果のタイミングを調整するように感じるかもしれませんが、アニメーションを不安定に見せることができます。 2番目の点は、ホバーリングを停止すると、ボックスの影がすぐに消えたり消えたりせずに消えてしまうことです。
アイコン、境界線、脈動効果をレイヤーするだけで、それからマウスオーバーですべてをアクティブにするためにjavascriptを使用すると、それが可能かどうか疑問に思っていました。 誰かが何らかの入力を提供できるのであれば、それは非常に感謝しています！