原文地址: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); } }