Css 循环涟漪动画

我试图得到半圆向上的涟漪效应，这是我到目前为止得到的。我有这个wifi光束动画，但我需要在半圆上使用纯色光束获得相同的效果。任何帮助都将不胜感激

而不是闪烁的效果，我需要平滑移动的网站横幅动画

<div class="wifi-symbol">
  <div class="wifi-circle first"></div>
  <div class="wifi-circle second"></div>
  <div class="wifi-circle third"></div> 
  <div class="wifi-circle fourth">
</div>

这是动画的参考图像

---

您在JSBin中发布的示例巧妙地使用divs中的边框，使用边框半径创建圆形，然后用容器剪裁，最后旋转结果以生成自上而下的wifi符号

---

尝试根据您的喜好调整边框和边框半径，直到您有一个半圆而不是四分之一圆。

您在JSBin中发布的示例巧妙地使用divs中的边框，使用边框半径创建一个圆形，然后用容器将其剪裁，最后旋转结果以生成自上而下的wifi符号

---

尝试根据您的喜好调整边界和边界半径，直到您有一个半圆而不是四分之一圆。

以下是一个只有一个元素但没有透明度的想法：

.ripple{
框大小：边框框；
宽度：200px；
高度：200px；
右边框：20px纯红；
边框顶部：20px纯红；
边框底部：20px实心透明；
左边框：20px实心透明；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px红色插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px红色插图；
边界半径：50%；
变换：旋转（-45度）；
位置：相对位置；
动画：脉冲2s无限线性；
}
.瑞波：以前{
内容：“；
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
背景：线性梯度（右上角，#fff 50%，透明50%）；
z指数：1；
}
@关键帧脉冲{
0% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
25% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,0.5）插页；
}
50% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,0.5）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
75% {
右边框颜色：rgba（255,0,0,0.5）；
边框顶部颜色：rgba（255,0,0,0.5）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
100% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
}

---

以下是一个只有一个元素但没有透明度的想法：

.ripple{
框大小：边框框；
宽度：200px；
高度：200px；
右边框：20px纯红；
边框顶部：20px纯红；
边框底部：20px实心透明；
左边框：20px实心透明；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px红色插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px红色插图；
边界半径：50%；
变换：旋转（-45度）；
位置：相对位置；
动画：脉冲2s无限线性；
}
.瑞波：以前{
内容：“；
位置：绝对位置；
底部：0；
排名：0；
左：0；
右：0；
背景：线性梯度（右上角，#fff 50%，透明50%）；
z指数：1；
}
@关键帧脉冲{
0% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
25% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,0.5）插页；
}
50% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,0.5）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
75% {
右边框颜色：rgba（255,0,0,0.5）；
边框顶部颜色：rgba（255,0,0,0.5）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
100% {
右边框颜色：rgba（255,0,0,1）；
边框顶部颜色：rgba（255,0,0,1）；
盒影：0px 0px 0 20px#fff插图，
0px 0px 0 40px rgba（255,0,0,1）插图，
0px 0px 0 60px#fff插图，
0px 0px 0 80px rgba（255,0,0,1）插图；
}
}

像这样吗

正文{
背景：#232425；
}
.wifi符号{
--颜色：#ffffcc；
--不透明度：0.4；
溢出：隐藏；
显示：内联块；
位置：相对位置；
宽度：150px；
高度：75px；
}
.wifi符号>*{
框大小：边框框；
显示：块；
位置：绝对位置；
底部：0px；
左：50%；
转化：translateY（50%）translateX（-50%）；
边框颜色：var（--color）；
边框样式：实心；
边界宽度：0.8em；
边界半径：100%；
不透明度：0；
动画：无限扩展；
}
.wifi符号>