三层海浪前后起伏，水面永不重复
← 返回 背景 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .sea{height:220px;border-radius:14px;background:linear-gradient(#87ceeb,#1e3a5f);position:relative;overflow:hidden}
.fx .sea i{position:absolute;left:-50%;width:200%;border-radius:45%;animation:kfx-sea ease-in-out infinite alternate}
.fx .sea .w1{height:90px;bottom:-30px;background:rgba(255,255,255,.2);animation-duration:5s}
.fx .sea .w2{height:70px;bottom:-10px;background:rgba(255,255,255,.14);animation-duration:7s;animation-delay:-2s}
.fx .sea .w3{height:80px;bottom:0;background:rgba(9,148,215,.3);animation-duration:9s;animation-delay:-4s}
@keyframes kfx-sea{to{transform:translateX(25%) rotate(4deg)}}<div class="fx">
<div class="sea"><i class="w1"></i><i class="w2"></i><i class="w3"></i></div>
</div>