SVG波浪动画

今天来试试用svg+css3制作波浪动画

下图是我制作出的效果

还不错吧

在制作波浪前，首先我们要画波浪啊，至于画波浪，如果你想直接通过计算贝塞尔曲线绘制出波浪。。。

好吧，那我也不拦着你

我就直接用ai的钢笔工具画了

为了画出一模一样的曲线可是花了我不少功夫

但是光滑曲线还是不行的，必须要画出一个以曲线为顶的“矩形”

像这样：

本人画工不敢恭维，凑合着看吧

毕竟之前没画过

导出svg文件再用文本编辑器打开就有路径了

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="300px">
        <defs>
            <g id="whole" fill-opacity="0.3" fill="cornflowerblue">
                <path id="wave1" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
                <path id="wave2" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
                <path id="wave3" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
            </g>
            
        </defs>
        <use xlink:href="#whole" opacity="1"></use>
    </svg>

常规操作，先来个svg标签，定义好宽高，里面放个defs标签，用于隐藏内部元素，因为我们需要的可不止是一个波浪，所以我们用g标签包住，方便定义样式

在css中这样设置：

        @keyframes move1 {
            0%{transform: translateX(-500px) scaleX(2.5);}
            100%{transform: translateX(0) scaleX(2.5);}
        }
        @keyframes move2 {
            0%{transform: translateX(-600px) scaleX(3);}
            100%{transform: translateX(0) scaleX(3);}
        }
        @keyframes move3 {
            0%{transform: translateX(-800px) scaleX(4);}
            100%{transform: translateX(0) scaleX(4);}
        }
        #wave1{animation: move1 2s linear infinite;}
        #wave2{animation: move2 1.7s linear infinite;}
        #wave3{animation: move3 2s linear infinite;}    

每个波浪我都定义了不同的样式，是他们看起来有所不同，且运动速度也不一样

这样波浪就做好了

但是这样就够了么？

我们知道波浪动画的应用其实很广泛，上述所做只不过是最普通的一个用法

其他用法怎么做呢？比如说下面这个：

其实也相当简单只要用到mask标签就可以了

<defs>
            <g id="whole" fill-opacity="0.3" fill="black" mask="url(#mask)">
                <use x="0" y="0" xlink:href="#text" opacity="1" fill="#FFF"></use>
                <path id="wave1" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
                <path id="wave2" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
                <path id="wave3" d="M0,200c50-50,99,0,99,0c51,50,101,0,101,0c50-50,100,0,100,0c50,50,100,0,100,0c50-50,100,0,100,0
            c50,50,100,0,100,0v200H0V200z"></path>
            </g>
            <text id="text" transform="translate(100,290)" font-size="150" font-weight="600">TEXT</text>
            <mask id="mask">
            <use x="0" y="0" xlink:href="#text" opacity="1" fill="#FFF"></use>
            </mask>
        </defs>

text标签设置文字内容样式，mask标签一定要放在defs中以表明他是作为遮罩来使用的，最后用use标签在g中调用mask

成功实现文字遮罩效果

还有加速球效果

这个我就不说了，也是遮罩效果，只不过从文字变成圆了而已