css水波浪动画效果

最新推荐文章于 2025-11-24 11:27:35 发布

原创

最新推荐文章于 2025-11-24 11:27:35 发布 · 897 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

为缩小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:1