Html
    Css
    Js

    
                        
.hornmian,.wavemain {
	height:5rem;
	width:5rem;
	border:0px solid #ccc;
	position:relative;
	overflow:hidden;
}
.spot,.wavemain {
	position:absolute;
	left:2rem !important;
}
.hornmian {
	transform:rotate(45deg);
	overflow:unset;
}
.wave,.spot {
	border-color:red;
	border-width:5px;
	border-style:solid;
	border-radius:50%;
	position:absolute;
	left:0px;
	bottom:0px;
	--size:0rem;
	width:var(--size);
	height:var(--size);
	transform:translate3d(-2.5px,2.5px,0);
	animation:move 2.3s linear infinite;
}
.wave1,.spot {
	animation:unset;
}
.wave2 {
	animation-delay:.2s;
}
.wave3 {
	animation-delay:.9s;
}
.wave4 {
	animation-delay:1.6s;
}
@keyframes move {
	from {
	--size:calc( 0rem + 5px );
	width:var(--size);
	height:var(--size);
	transform:translate3d(calc( var(--size) / -2 - 2.5px ),calc( var(--size) / 2 + 2.5px),0);
	opacity:1;
}
100% {
	--size:calc( 6rem + 5px );
	width:var(--size);
	height:var(--size);
	transform:translate3d(calc( var(--size) / -2 ),calc( var(--size) / 2 ),0);
	opacity:0;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

简单的音波效果

更新时间:2022-03-29 01:08:07

外面有个点,在最上面,波纹动画在下一级

0