Html
    Css
    Js

    
                        
.wave {
	width:400px;
	height:200px;
	outline:2px solid rgba(128,128,128,0.521);
	--c:#2196F3;
	--w1:radial-gradient(100% 57% at top,#0000 100%,var(--c) 100.5%) no-repeat;
	--w2:radial-gradient(100% 57% at bottom,var(--c) 100%,#0000 100.5%) no-repeat;
	background:var(--w1),var(--w2),var(--w1),var(--w2);
	background-position-x:-200%,-100%,0%,100%;
	background-position-y:100%;
	background-size:50.5% 100%;
	animation:m 1s infinite linear;
}
@keyframes m {
	0% {
	background-position-x:-200%,-100%,0%,100%
}
100% {
	background-position-x:0%,100%,200%,300%
}
}

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

纯CSS实现波浪效果

更新时间:2024-05-20 08:48:07

0