创建一个双面无线电波动画 [英] creating a both side radio wave animation
本文介绍了创建一个双面无线电波动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要这样的雷达波动画:
I want a Radar wave animation like this:
我利用对Svgs的较差知识进行了大量工作，我添加了所需波形的左侧，并且效果很好.但我需要一些帮助，以在右侧添加适当的解决方案.
With a lot of effort using my poor knowledge of Svgs I added the left side of the desired wave and it works fine. but I need some help to add the right side with a proper solution.
注意:如果您知道任何比此类代码更简单的源代码或更好的解决方案来实现这种动画，请随时通知我.
Note: if you know any source code or any better solution to achieve such animation which is simpler than mine please fell free to notify me.
注意2:，我需要一个函数来启动动画.
Note 2: I need a function to initiate the animation.
谢谢.
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>推荐答案
访问元素 wave1..wave6 应该类似于 querySelectorAll :
const wave1 = document.querySelectorAll(".radio-wave-1");
...
const wave6 = document.querySelectorAll(".radio-wave-6");
因为这是一个集合.
接下来，我应用了 for 循环，指定 2 作为索引，为每个 wave1..wave6 添加一个类.
Next, I applied a for loop, specifying 2 as index to add a class for each wave1..wave6.
此外，我决定更正您的html和css布局.如果您希望波出现在显示的图片中，则需要执行以下操作:
Also, I decided to correct your html and css layout. If you want your waves to be in the picture that you showed, then you need to do the following:
使用 flex 彼此对齐.将此添加到您的CSS:
Use flex to align with each other. Add this to your css:
.wave-container {
display: flex;
justify-content: center;
}
并从 .left-wave-container 和 .right-wave-container 选择器中删除规则 margin-right:50％.
And remove rule margin-right: 50% from .left-wave-container and .right-wave-container selectors.
现在完成了！
function Wave() {
const waves = document.querySelectorAll(".radio-wave");
const wave1 = document.querySelectorAll(".radio-wave-1");
const wave2 = document.querySelectorAll(".radio-wave-2");
const wave3 = document.querySelectorAll(".radio-wave-3");
const wave4 = document.querySelectorAll(".radio-wave-4");
const wave5 = document.querySelectorAll(".radio-wave-5");
const wave6 = document.querySelectorAll(".radio-wave-6");
waves.forEach(function(wave) {
wave.classList.add('add-wave');
for (var i = 0; i < 2; i++) {
wave1[i].classList.add('add-radio-wave-1');
wave2[i].classList.add('add-radio-wave-2');
wave3[i].classList.add('add-radio-wave-3');
wave4[i].classList.add('add-radio-wave-4');
wave5[i].classList.add('add-radio-wave-5');
wave6[i].classList.add('add-radio-wave-6');
}
});
}
setTimeout(() => Wave(), 2000);body {
background: black;
}
.wave-container {
display: flex;
justify-content: center;
}
.left-wave-container {
position: relative;
/*margin-right: 50%;*/
padding: 0;
font-size: 16px;
}
.right-wave-container {
position: relative;
/*margin-right: 50%;*/
padding: 0;
font-size: 16px;
transform: rotate(180deg); /* flip the animation*/
}
.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%);
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wave-container">
<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>
<div class="right-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>
</div>
<script src="script.js"></script>
</body>
</html>这篇关于创建一个双面无线电波动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
