这是使用 SVG 和 CSS 动画制作的波浪效果，上半部分是蓝色（可修改成其他颜色）渐变的背景颜色，下半部分就是波浪，有四条波浪在不停地来回起伏，非常逼真。该波浪效果可用于大部分页面的底部，使页面增加一点活泼的气息。

查看效果：简单的CSS波浪效果

制作过程

1、HTML

首先编写 html 结构，在容器 container 里面放入内容 content 和 svg 绘制的波浪：

<div class="container">
   <div class="content">
   </div>
   
   <svg
       class="waves"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="0 24 150 28"
       preserveAspectRatio="none"
       shape-rendering="auto"
   >
       <defs>
           <path
               id="gentle-wave"
               d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
           />
       </defs>
       <g class="parallax">
           <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
           <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
           <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
           <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
       </g>
   </svg>
</div>

此时，页面还看不出效果，因为波浪是白色的。

2、CSS

给容器 container 加上背景颜色，使白色的波浪能看见，给内容 content 加一点高度，撑开页面，再给波浪加一点高度。

.container {
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
}
.content {
    height: 65vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /* 修复 Safari 等浏览器下方空隙 */
    min-height: 100px;
    max-height: 150px;
}

此时，页面的效果如下：

3、动画

最后给波浪加上动画效果，因为有四条波浪，我们分别设置不同的动画延迟时间和动画持续时间，让它们错开，使它们看起来更加逼真。

.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

到这里就制作完了，如需查看效果或者下载代码，请点击这里。