SVG实现海浪效果

SVG实现海浪效果前言今天无意中看到了某网站的海浪效果。F12看到是用SVG实现的，瞬间勾起了我的好奇心。话不多说，先看效果图。SVG简介SVG是一种开放标准的矢量图形语言，**使您能够设计令人兴奋的高分辨率Web图形页面**。今天的主角——pathpath元素是SVG基本形状中最强大的，它不仅可以创建其他基本形状，还可以创建很多其他形状。您可以使用路径元素绘制矩形（矩形或圆角矩形）、圆形、椭圆、折线、多边形和一些其他形状，例如贝塞尔曲线、二次曲线和其他曲线。路径元素的形状由属性d定义，属性d的值是一个“命令+参数”的序列。pathstroke的公共属性//定义线条颜色fill//定义填充颜色（支持rgba）d//定义图形（必填）d路径的属性M=moveto//定义起点L=lineto//画一条线，需要定义起点和终点H=horizo??ntallineto//水平线，只需要定义长度V=verticallineto//垂直线，只需要定义LengthC=curveto//三次贝塞尔曲线S=smoothcurveto//smoothcurveQ=quadraticBéziercurve//quadraticBéziercurveT=smoothquadraticBéziercurveto//smoothquadraticBéziercurveA=ellipticalArc//EllipsearcZ=closepath//闭合图形（连接起点从当前点）注意：以上所有命令都允许使用小写字母。大写表示绝对定位，**小写表示相对定位**。坐标规则画线起点：(50,50)//M50,50终点：(100,100)//L100,100画三角形固定点A:(100,100)//M50,50左下点B:(50,150)//L50,150右下pointC:(150,150)//L150,150画曲线比较复杂，下次单独讲解分析1个波是由什么组成的，我们可以看到波是由3个组成的图像集，所以我们需要拍3张h实现2.每组波浪由曲线和直线组成填充背景色绘制波浪绘制三个波浪1.背景颜色形成距离错觉2.三个波浪的位置错开如何让波浪动起来1.改变每组波浪的起始位置即可2.用js动态改变d属性路径3.为了更好的效果，分别定义每组波浪的移动速度欢迎留言评论！