时间戳

首页 > 解决方案 > 创建两侧无线电波动画

javascript - 创建两侧无线电波动画

问题描述

我想要这样的雷达波动画：

在此处输入图像描述

使用我对Svgs的贫乏知识付出了很多努力，我添加了所需波形的左侧，并且效果很好。但我需要一些帮助来添加正确的解决方案。

注意：如果您知道任何源代码或任何更好的解决方案来实现比我更简单的动画，请随时通知我。

注2：我需要一个函数来启动动画。

提前致谢。

function Wave() {
  const waves = document.querySelectorAll(".radio-wave");
  waves.forEach(wave => wave.classList.add('add-wave'));
  
  const wave1 = document.querySelector(".radio-wave-1");
  wave1.classList.add('add-radio-wave-1');
  
  const wave2 = document.querySelector(".radio-wave-2");
  wave2.classList.add('add-radio-wave-2');
  
  const wave3 = document.querySelector(".radio-wave-3");
  wave3.classList.add('add-radio-wave-3');
  
  const wave4 = document.querySelector(".radio-wave-4");
  wave4.classList.add('add-radio-wave-4');
  
  const wave5 = document.querySelector(".radio-wave-5");
  wave5.classList.add('add-radio-wave-5');
  
  const wave6 = document.querySelector(".radio-wave-6");
  wave6.classList.add('add-radio-wave-6');
  
  
}

setTimeout(() => Wave(), 2000);
body {
  background: black;
}

.left-wave-container {
  position: relative;
  margin-right: 50%;
  padding: 0;
  font-size: 16px;
}

.radio-wave-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  margin: 5rem;
}

.radio-wave-container.content {
  flex-flow: row nowrap;
  width: 100%;
}

.radio-source {
  position: absolute;
  right: 2rem;
  width: 2rem;
  fill: #fcba03;
}

.add-wave {
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.radio-wave {
  position: absolute;
  right: 2rem;
  stroke-linecap: round;
  stroke-width: 4;
  stroke: #fcba03;
  fill: none;
  transform: scale(0.2) translateX(150%);
  opacity: 0;
  width: 5rem;
  height: 5rem;
}

.add-radio-wave-1 {
  -webkit-animation-name: wave-1;
          animation-name: wave-1;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes wave-1 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-1 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-2 {
  -webkit-animation-name: wave-2;
          animation-name: wave-2;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

@-webkit-keyframes wave-2 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-2 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-3 {
  -webkit-animation-name: wave-3;
          animation-name: wave-3;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes wave-3 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-3 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-4 {
  -webkit-animation-name: wave-4;
          animation-name: wave-4;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

@-webkit-keyframes wave-4 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-4 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-5 {
  -webkit-animation-name: wave-5;
          animation-name: wave-5;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}

@-webkit-keyframes wave-5 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-5 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
.add-radio-wave-6 {
  -webkit-animation-name: wave-6;
          animation-name: wave-6;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

@-webkit-keyframes wave-6 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}

@keyframes wave-6 {
  0% {
    transform: scale(0.2) translateX(150%);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.3) translateX(50%);
    opacity: 0.3;
  }
  20% {
    transform: scale(0.4) translateX(-40%);
    opacity: 0.4;
  }
  30% {
    transform: scale(0.5) translateX(-120%);
    opacity: 0.5;
  }
  40% {
    transform: scale(0.6) translateX(-190%);
    opacity: 0.6;
  }
  50% {
    transform: scale(0.7) translateX(-250%);
    opacity: 0.7;
  }
  60% {
    transform: scale(0.8) translateX(-300%);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9) translateX(-350%);
    opacity: 0.9;
  }
  80% {
    transform: scale(1) translateX(-400%);
  }
  90% {
    transform: scale(1.1) translateX(-450%);
  }
  100% {
    transform: scale(1.2) translateX(-500%);
  }
}
<div class="left-wave-container" xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg style="position:absolute;width:0;height:0;" width="0" height="0" version="1.1">
      <defs>
        <symbol id="radio-wave" viewBox="0 0 100 200">
    
          <g>
            <path d="M62.5,185 Q12.5,100 62.5,15" />
          </g>
        </symbol>
        <symbol id="radio-source" viewBox="0 0 100 100">
      
        </symbol>
      </defs>
    </svg>
    <div class="radio-wave-container">
      <div class="radio-wave-container content">
        <svg class="radio-source">
          <use xlink:href="#radio-source"></use>
        </svg>
        <svg class="radio-wave radio-wave-1">
          <use xlink:href="#radio-wave"></use>
        </svg>
        <svg class="radio-wave radio-wave-2">
          <use xlink:href="#radio-wave"></use>
        </svg>
        <svg class="radio-wave radio-wave-3">
          <use xlink:href="#radio-wave"></use>
        </svg>
        <svg class="radio-wave radio-wave-4">
          <use xlink:href="#radio-wave"></use>
        </svg>
        <svg class="radio-wave radio-wave-5">
          <use xlink:href="#radio-wave"></use>
        </svg>
        <svg class="radio-wave radio-wave-6">
          <use xlink:href="#radio-wave"></use>
        </svg>
      </div>
    </div>
  </div>

标签： javascripthtmlcss

解决方案

使用

transform: rotate(180deg);

在一个环绕的 div 上会反射动画，所以你可以在右侧使用它。

例子：

<div class="radio-wave-container">
      <div class="radio-wave-container content">
        <div class="reflect">
            <svg class="radio-source">
            <use xlink:href="#radio-source"></use>
            </svg>
        </div>
...(etc)

将以下内容添加到样式表中：

.reflect {
     transform: rotate(180deg);
}

推荐阅读