1
在閱讀Is there a way to use two CSS3 box shadows on one element?後，我想出瞭如何將兩個陰影框應用於一個類。但是，我想單獨操作這兩個陰影框，但將它們應用於相同的元素。我嘗試使用分隔線和兩個單獨的類，但是這並沒有產生正確的結果。使用不同設置的一個元素上的多個框陰影
具體而言，我想要做的是： 在懸停時，向上縮放圖標並淡入邊框。在短暫的延遲後，開始一個脈動效果，邊框仍然打開。當光標移開時，所有效果都會淡出並且圖標縮放到正常大小。 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);}}
所以，我有兩個問題。 首先是整個效果在同一時間緩解，但我希望內邊界先淡入。我覺得要添加更多的關鍵幀，並調整脈動效果的時間可能會起作用，但可能會使動畫看起來波濤洶涌。 第二個是當你停止盤旋時，盒子陰影立即消失而不會消失或緩解。
我想知道是否可以通過層疊圖標，邊框和脈動效果來完成，然後使用javascript在mouseover上激活它們。 如果有人可以提供一些輸入，將不勝感激！