CSS无限涟漪动画
CSS无限涟漪动画
提问于 2019-02-28 15:07:24
我想做无限的涟漪动画，但它会变得不自然..
我不喜欢这种突然的变化，我想让动画永远继续下去。我该怎么做呢？
在代码片段中，由于某些原因，我不能很好地显示它，所以当前的情况是在JSFiddle中。
body {font-size: 62.5%; background-color: #000;}
.ripple {
margin: auto;
margin-top: 10rem;
background-color: #fff;
width: 1rem;
height: 1rem;
border-radius: 50%;
animation: ripple 2s linear infinite;
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2),
0 0 0 1.5rem rgba(255,255,255, 0.2),
0 0 0 5rem rgba(255,255,255, 0.2);
}
100% {
box-shadow: 0 0 0 1.5rem rgba(255,255,255, 0.2),
0 0 0 4rem rgba(255,255,255, 0.2),
0 0 0 8rem rgba(255,255,255, 0);
}
}<div class="ripple" style="animation-delay: 0s"></div>
顺便说一句，我也用HTML尝试了this()，但是圆圈重叠了，我做不好。:(
<div class="ripple" style="animation-delay: 0s"></div>
<div class="ripple" style="animation-delay: 1s"></div>
<div class="ripple" style="animation-delay: 2s"></div>回答 2
Stack Overflow用户
回答已采纳
发布于 2019-02-28 15:18:31
如果你想让你的动画更流畅，你需要匹配起始值和结束值，这样你就不会得到“跳跃”的效果。
如下所示：
@keyframes ripple {
0% {
box-shadow: 0 0 0 0rem rgba($ripple-color, 0.2),
0 0 0 1rem rgba($ripple-color, 0.2),
0 0 0 2rem rgba($ripple-color, 0.2),
0 0 0 5rem rgba($ripple-color, 0.2);
}
100% {
box-shadow: 0 0 0 1rem rgba($ripple-color, 0.2),
0 0 0 2rem rgba($ripple-color, 0.2),
0 0 0 5rem rgba($ripple-color, 0.2),
0 0 0 8rem rgba($ripple-color, 0);
}
}Stack Overflow用户
发布于 2019-02-28 16:43:26
这里有另一个更简单的方法来获得平滑的效果。您可以保持阴影动画的简单，并考虑让伪元素具有相同的延迟动画。诀窍是正确选择延迟/持续时间。
我将持续时间设置为3s (3个元素)，并且每个元素之间存在1s延迟。
body {background-color: #000;}
.ripple {
margin: auto;
margin-top: 5rem;
background-color: #fff;
width: 1rem;
height: 1rem;
border-radius: 50%;
position:relative;
animation: ripple 3s linear infinite;
}
.ripple::before,
.ripple::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius: 50%;
animation:inherit;
animation-delay:1s;
}
.ripple::after {
animation-delay:2s;
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 .7rem rgba(255,255,255, 0.2);
}
100% {
box-shadow: 0 0 0 8rem rgba(255,255,255, 0);
}
}<div class="ripple"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54920183
复制相关文章
相似问题