css水波浪动画结果
为缩小gif巨细，动画结果做了加速，结果如下：https://i-blog.csdnimg.cn/direct/bb98336d8aa44c2b94c0418ba889cc5b.gif
<!DOCTYPE html>
<html>
<head>
<style>
*{padding:0;margin:0;}/*清除默认填充及边距*/
.water{position:relative;width:100vw;height:100vh;overflow:hidden;background:#cdfffc;}
.water:before,.water:after{content:"";position:absolute;left:50%;width:200vw;height:200vw;top:-158vw;margin-left:-100vw;background:linear-gradient(to right,rgba(1,174,255,1),rgba(11,5,255,1));border-radius:42%;animation:rotate 20s linear infinite;z-index:1;}
.water:after{border-radius:40%;background:linear-gradient(to right,rgba(11,5,255,0.5),rgba(1,174,255,0.5));animation:rotate 24s linear -10s infinite;z-index:2;}
@keyframes rotate {
50%{transform:rotate(180deg);}
100%{transform:rotate(360deg);}
}
.water .millia{position:relative;z-index:3;background:#fff;width:96vw;margin:1vh auto 0 auto;text-align:center;border-radius:1vh;}
</style>
</head>
<body>
<!--if--使用-->
<div class="water"></div>
<!--else--做背景图使用-->
<div class="water">
<div class="millia"><br><br><br>如<br>果<br>做<br>背<br>景<br>图<br>使<br>用<br><br><br><br></div>
</div>
</body>
</html>
说明：
接纳vw和vh单位可适配移动和pc，调解top的值可以改变高度
.water:before,.water:after设置width、height、border-radius、top、background等以改变结果
https://i-blog.csdnimg.cn/direct/c55e388d26ae4c55b591447b1c68a4e5.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]