html5声波效果动画,CSS3 声波发射动画

CSS

语言：

CSSSCSS

确定

.outer {

box-sizing: border-box;

position: relative;

width: 1000px;

height: 50px;

border-color: red;

border-style: solid;

border-width: 0px;

border-radius: 0%;

overflow: hidden;

--transform: perspective(300px) rotateY(45deg);

}

.outer:after {

content: '';

box-sizing: border-box;

position: absolute;

top: -50%;

left: -10%;

width: 20%;

height: 200%;

border-color: red;

border-style: solid;

border-width: 0px;

border-radius: 50%;

animation: mv 1s linear infinite;

}

@keyframes mv {

from {

box-shadow: 0px 0px 0 5px white, 2px 0px 0 5px blue, 40px 0px 0 5px white, 45px 0px 0 5px blue, 80px 0px 0 5px white, 87