前言
SVG功能是十分强大的，其可以帮助我们实现很多有趣的效果，如：图标、插画、动画等
下面就介绍一个用SVG配合CSS动画实现的波浪动画，其可以用在页脚，用于增加页面趣味；或用在页首与正文间，起到分割作用，或用在充电、水球动画中
实现步骤
波浪动画，本质就是多块波浪状图形按不同速率来回移动，效果如下：
画基础图形
首先，要画一个波浪状的基础图形，至少要有一个起伏，具体可自由发挥
这一步，使用SVG的path标签，这里采用贝塞尔曲线画，不熟悉该命令的话可以看之前的文章，如下
- path需指定一个id，为后续重复使用需要
- defs标签用于包裹引用图形元素，其内定义的元素不会直接呈现，可通过后续调用标签呈现
path大致呈现图形如下：
画整体图形
接下来，使用use标签复用上方定义的path图形，营造多层波浪的感觉，具体需要几层可按喜好定，一般3-5层效果较好
- g标签用于组合图形，可理解为一个文件夹
- use标签用于引用图形
- xlink:href指定引用的图形，这里用id选择器指定
- x和y规定其位置
- 这里use采用不同的y值，构造出波浪高低起伏的感觉
大致呈现图形如下
- 红色边框为path命令实际绘制图形
- 蓝色边框为viewBox设置区域
- 黑色图形为实际呈现图形
- 实际绘制图形比呈现图形大是为了使动画更加流畅自然
添加样式动画
最后，使用CSS为其编写样式和动画
动画如下：
- 本质是x轴方向的一个平移动画，这里使用translate3d，渲染计算时可以调用gpu，会有一定的性能提升
接着，书写样式
- 为每层波浪采用一致的动画及运动曲线
- 不同波浪层设置不同的动画持续时长及延迟，营造波浪连绵，时而汹涌，时而平静的感觉
- 波浪层使用不同透明度背景填充，营造前后空间感
使用时，波浪的填充颜色一般采用与页面背景一致的颜色，以使页面协调不突兀
喜欢的可以自行动手写一遍尝试