Css 下箭头周围具有涟漪效应的多个环

我已经能够用一个环在向下箭头周围产生涟漪效应

动画：

我想扩展动画，以包括三个具有类似动画的环。 实现动画的最简单方法是什么

。向下箭头{
显示：无；
位置：绝对位置；
左：0；
右：0；
保证金：0自动；
最高：81.5%；
z指数：5；
边界半径：50%；
高度：80px；
宽度：80px；
}
.戒指{
边框：2.5px纯白；
-webkit边界半径：50%；
高度：80px；
宽度：80px；
位置：绝对位置；
左：0；
右：0；
最高：81%；
z指数：5；
保证金：0自动；
-webkit动画：脉动2秒放松；
-webkit动画迭代计数：无限；
-webkit动画延迟：2s；
不透明度：0.0；
}
@-webkit关键帧脉动{
0% {
-webkit变换：缩放（0,0）；
不透明度：1；
}
100% {
-webkit转换：规模（1.2,1.2）；
不透明度：0；
}
}

---

以下是解决方案的一种变体：

正文{
背景色：#668822；
}
.向下箭头{
显示：无；
位置：绝对位置；
左：0；
右：0；
保证金：0自动；
最高：81.5%；
z指数：5；
边界半径：50%；
高度：80px；
宽度：80px；
}
.戒指{
边框：2.5px纯白；
-webkit边界半径：50%；
高度：80px；
宽度：80px；
位置：绝对位置；
左：0；
右：0；
顶部：200px；
z指数：5；
保证金：0自动；
-webkit动画：脉动2秒放松；
-webkit动画迭代计数：无限；
-webkit动画延迟：2s；
不透明度：0.0；
}
.ring2{
-webkit动画延迟：1.7s；
}
.ring3{
-webkit动画延迟：1.4s；
}
@-webkit关键帧脉动{
0% {
-webkit变换：缩放（0,0）；
不透明度：1；
}
100% {
-webkit转换：规模（1.2,1.2）；
不透明度：0；
}
}

---

以下是解决方案的一种变体：

正文{
背景色：#668822；
}
.向下箭头{
显示：无；
位置：绝对位置；
左：0；
右：0；
保证金：0自动；
最高：81.5%；
z指数：5；
边界半径：50%；
高度：80px；
宽度：80px；
}
.戒指{
边框：2.5px纯白；
-webkit边界半径：50%；
高度：80px；
宽度：80px；
位置：绝对位置；
左：0；
右：0；
顶部：200px；
z指数：5；
保证金：0自动；
-webkit动画：脉动2秒放松；
-webkit动画迭代计数：无限；
-webkit动画延迟：2s；
不透明度：0.0；
}
.ring2{
-webkit动画延迟：1.7s；
}
.ring3{
-webkit动画延迟：1.4s；
}
@-webkit关键帧脉动{
0% {
-webkit变换：缩放（0,0）；
不透明度：1；
}
100% {
-webkit转换：规模（1.2,1.2）；
不透明度：0；
}
}

---

这是我能做的最好的事情：

div.ring:在，
分区环：之后，跨度{
边框：1px纯白；
位置：绝对位置；
内容：''；
高度：80px；
宽度：80px；
左：0；
右：0；
最高：25%；
z指数：5；
保证金：0自动；
边界半径：50%；
长方体阴影：0 1px白色；
动画：脉动3s舒缓无限；
}
分区环：之后{
-webkit动画延迟：2s；
}
跨度{
-webkit动画延迟：1s；
}
@-webkit关键帧脉动{
0% {
-webkit变换：缩放（0,0）；
不透明度：1；
}
100% {
-webkit转换：规模（1.2,1.2）；
不透明度：0；
}
} 
正文{背景：黑色；}

---

这是我能做的最好的事情：

div.ring:在，
分区环：之后，跨度{
边框：1px纯白；
位置：绝对位置；
内容：''；
高度：80px；
宽度：80px；
左：0；
右：0；
最高：25%；
z指数：5；
保证金：0自动；
边界半径：50%；
长方体阴影：0 1px白色；
动画：脉动3s舒缓无限；
}
分区环：之后{
-webkit动画延迟：2s；
}
跨度{
-webkit动画延迟：1s；
}
@-webkit关键帧脉动{
0% {
-webkit变换：缩放（0,0）；
不透明度：1；
}
100% {
-webkit转换：规模（1.2,1.2）；
不透明度：0；
}
} 
正文{背景：黑色；}

我不知道这是否正确。但你能做的是。使用相同的CSS再创建两个环div，并延迟或增加其webkit动画时间。请确保使用位置值使它们一个位于另一个之上。请检查：它们使用CSS after和before属性来创建该效果。我不知道这是否正确。但你能做的是。使用相同的CSS再创建两个环div，并延迟或增加其webkit动画时间。确保使用位置值使它们一个位于另一个之上。请检查：它们使用CSS after和before属性来创建该效果。