原文地址：https://segmentfault.com/a/1190000014895634
感想：这里的波浪只是侧面的，利用几个平面一部分弧旋转得到。
HTML代码：
<div class="sea"> ???<p class="title">the sea</p> ???<span class="wave"></span> ???<span class="wave"></span> ???<span class="wave"></span></div>
CSS代码：
html, body { ???margin: 0; ???padding: 0; ???height: 100%; ???display: flex; ???justify-content: center; ???align-items: center; ???background: linear-gradient(antiquewhite, navajowhite);}.sea { ???position: relative; ???width: 300px; ???height: 300px; ???background-color: whitesmoke; ???background-image: linear-gradient( ???????darkblue, ???????rgba(255, 255, 255, 0) 80%, ???????rgba(255, 255, 255, 0.5)); ???border-radius: 5px; ???box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2); ???overflow: hidden;}/* 这里只有水平居中和行高一定 */.sea .title { ???position: absolute; ???width: 100%; ???color: white; ???font-size: 24px; ???font-family: serif; ???text-align: center; ???line-height: 250px; ???text-transform: uppercase; ???letter-spacing: 0.4em; ???z-index: 1;}/* 制作海浪动画效果: 让三个平面按不同时间旋转 */.sea .wave { ???position: absolute; ???top: -250px; ???left: -100px; ???width: 500px; ???height: 500px; ???background: deepskyblue; ???border-radius: 43%; ???filter: opacity(0.4); ???/* 加大海浪的波动幅度:设置旋转元素的基点位置 */ ???transform-origin: 50% 48%; ???animation: drift linear infinite;}.sea .wave:nth-of-type(1) { ???animation-duration: 5s;}.sea .wave:nth-of-type(2) { ???animation-duration: 7s;}.sea .wave:nth-of-type(3) { ???animation-duration: 9s; ???/* 增加颜色差异 */ ???background-color: orangered; ???filter: opacity(0.1);}@keyframes drift { ???from { ???????transform: rotate(360deg); ???}}24.纯 CSS 创作出平滑的层叠海浪特效
原文地址：https://www.cnblogs.com/FlyingLiao/p/10290139.html