我需要对圆的box-shadow
进行动画处理,并在相同的box-shadow
过渡期间将其从 1.6 倍缩小到 1。
我面临的问题是比例动画在box-shadow
动画完成后发生。
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s ease infinite;
}
@keyframes rippleeff {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1.4);
}
70% {
-moz-box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
transform: scale(1);
}
}
<div class="ripple">
</div>
小提琴
当你transform: scale(1.6)
时,你的盒子阴影变得transparent
,之后当你要scale(1)
你的box-shadow
是动画,但你看不到它,因为它是透明的......所以改变box-shadow
颜色
还更改了代码中的比例值...
body {
background-color: #333;
}
.ripple {
width: 20px;
margin: 50px auto;
height: 20px;
background: #ccc;
border-radius: 50%;
animation: rippleeff 2s linear infinite;
}
@keyframes rippleeff {
0% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 20px rgba(204, 169, 44, 0);
transform: scale(1.6);
}
100% {
box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
transform: scale(1);
}
}
<div class="ripple">
</div>