Question

阅读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在鼠标悬停时激活所有这些效果。如果有人能提供一些意见，我们将不胜感激！

Answer 1

用不同的方法解决了我的问题。我在它后面分层第二个圆圈，并对实际物体保持闪烁效果。从那里开始，使用CSS +运算符，我可以操纵两个圆圈，当悬停在内圆上时外圈会淡入。 Working version

一个元素上的多个框阴影，具有不同的设置

1 个答案: