CSS圆形波纹动画

Question

我正在尝试获得半圆向上的波纹效果，这就是我到目前为止所掌握的。我有这个wifi光束动画，但是我需要在带有纯色光束的半圆上具有相同的类似效果。任何帮助将不胜感激。

除了闪烁效果外，我还需要网站横幅的平滑移动动画。

What I have so far

<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>

这是动画的参考图像。

Answer 1

这是一个只有一个要素但没有透明度的想法：

.ripple {
 box-sizing:border-box;
 width:200px;
 height:200px;
 border-right:20px solid red;
 border-top:20px solid red;
 border-bottom:20px solid transparent;
 border-left:20px solid transparent;
 
 box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px red inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px red inset;
 
 border-radius:50%;
 transform:rotate(-45deg);
 position:relative;
 animation:pulse 2s infinite linear;
}
.ripple:before {
  content:"";
  position:absolute;
  bottom:0;
  top:0;
  left:0;
  right:0;
  background:linear-gradient(to top right,#fff 50%,transparent 50%);
  z-index:1;
}

@keyframes pulse {
 0% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 }
 25% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 0.5) inset;
 
 }
 50% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 0.5) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 
 }
 75% {
  border-right-color: rgba(255, 0, 0, 0.5);
  border-top-color:rgba(255, 0, 0, 0.5);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 
 }
 100% {
  border-right-color: rgba(255, 0, 0, 1);
  border-top-color:rgba(255, 0, 0, 1);
  box-shadow:0px 0px 0 20px #fff inset,
            0px 0px 0 40px rgba(255, 0, 0, 1) inset,
            0px 0px 0 60px #fff inset,
            0px 0px 0 80px rgba(255, 0, 0, 1) inset;
 
 }
}

<div class="ripple">

</div>

具有透明度，您可以尝试以下操作：

.ripple {
 box-sizing:border-box;
 width:200px;
 height:200px;
 border-right:20px solid red;
 border-top:20px solid red;
 border-bottom:20px solid transparent;
 border-left:20px solid transparent;
 
 border-radius:50%;
 transform:rotate(-45deg);
 position:relative;
 animation:pulse 3s 2s infinite linear;
}
.ripple:before {
  content:"";
  position:absolute;
  bottom:20px;
  top:20px;
  left:20px;
  right:20px;
  border:inherit;
  border-radius:inherit;
  animation:pulse 3s 1s infinite linear;
}
.ripple:after {
  content:"";
  position:absolute;
  bottom:60px;
  top:60px;
  left:60px;
  right:60px;
  border:inherit;
  border-radius:inherit;
  animation:pulse 3s infinite linear;
}

@keyframes pulse {
  0%,33%,100% {
    border-right:20px solid red;
    border-top:20px solid red;
    border-bottom:20px solid transparent;
    border-left:20px solid transparent;
  }
  66% {
    border-right:20px solid rgba(255,0,0,0.5);
    border-top:20px solid rgba(255,0,0,0.5);
    border-bottom:20px solid transparent;
    border-left:20px solid transparent;
  }

}

<div class="ripple">

</div>

Answer 2

喜欢吗？

body {
  background: #232425;
}
.wifi-symbol {
  --color: #ffffcc;
  --opacity: 0.4;
  overflow: hidden;
  display: inline-block;
  position: relative;
  width: 150px;
  height: 75px;
}
.wifi-symbol > * {
  box-sizing: border-box;
  display: block;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateY(50%) translateX(-50%);
  border-color: var(--color);
  border-style: solid;
  border-width: 0.8em;
  border-radius: 100%;
  opacity: 0;
  animation: expansion 3s infinite;
}
.wifi-symbol > :nth-child(1) {
  width: 100%;
  height: 200%;
  animation-delay: 800ms;
}
.wifi-symbol > :nth-child(2) {
  width: 72.5%;
  height: 145%;
  animation-delay: 400ms;
}
.wifi-symbol > :nth-child(3) {
  width: 45%;
  height: 90%;
}
.wifi-symbol > :nth-child(4) {
  width: 10%;
  height: 20%;
  opacity: 1;
  background-color: var(--color);
  animation: none;
}

@keyframes expansion {
  0% {
    opacity: 0;
  }
  15% {
    opacity: var(--opacity);
  }
}

.as-console-wrapper { max-height: 0 !important; }

<div class="wifi-symbol"><div></div><div></div><div></div><div></div></div>

Answer 3

您在JSBin中发布的示例巧妙地使用了div中的边框以使用border-radius创建圆形，然后将其与容器裁剪，最后旋转结果以制作一个自上而下的wifi符号。 / p>

尝试根据自己的喜好调整边界和边界半径，直到出现半圆而不是四分之一圆为止。