纯CSS3制作的SVG自定义颜色动态滚动波浪动画

2020-11-17 22:43 102 抢沙发小王总博客 0

小王总 爱笑的小王总

随着CSS3的成熟，越来越多的特效动画不仅仅局限于使用图片来完成了。以前的这种波浪效果大都还是用几张图片交替滚动，我以前也用过图片做的这种波浪滚动的效果。

但是波浪的颜色能不能满足网站的配色需求之类的就很难弄了，因为换一个颜色就要去做一堆的图片出来，最后还可能不满意。直到后来我才找到了用SVG绘制波浪的效果，然后利用CSS3滚动就可以达到波浪滚动的目的了。

然后这种SVG绘制的波浪是可以自定颜色的，采用16进制的颜色代码。因为16进制制作透明度比较方便。当然了，最多支持7种颜色。你也可以使用全不透明的，然后制作一个彩虹的波浪也是可以的。

效果演示

白色的波浪展示

黑色的波浪展示

红色的波浪展示

代码解析

html(SVG)代码



<!-- 下面是核心主要代码 -->>
<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"></path></defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255, 255, 255,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255, 255, 255,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255, 255, 255,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255, 255, 255,1)"></use>
            </g>
        </svg>

<<!-- 下面是html代码 -->>
<div class="waves1">
        <h1>白色的波浪展示</h1>
        <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"></path></defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255, 255, 255,0.7)"></use>
<!-- 16进制的白色 0.7 代表透明度 -->
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255, 255, 255,0.5)"></use>
<!-- 16进制的白色 0.5 代表透明度 -->
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255, 255, 255,0.3)"></use>
<!-- 16进制的白色 0.3 代表透明度 -->
                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255, 255, 255,1)"></use>
<!-- 16进制的白色 1 代表不透明 -->
            </g>
        </svg>
    </div>
    <div class="waves2">
        <h1 style="color:#000000">黑色的波浪展示</h1>
        <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"></path></defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(0, 0, 0,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(0, 0, 0,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(0, 0, 0,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(0, 0, 0,1)"></use>
            </g>
        </svg>
    </div>
    <div class="waves3">
        <h1>红色的波浪展示</h1>
        <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"></path></defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255, 0, 0,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255, 0, 0,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255, 0, 0,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(255, 0, 0,1)"></use>
            </g>
        </svg>
    </div>

css代码


h1{
    margin: 0;
    color: #ffffff;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 80px;
}
.waves1{
    background-color: #0084ff;
}
.waves2{
    background-color: #ffffff;
}
.waves3{
    background-color: #000000;
}
#以下是主要代码
.waves {
    position: relative;
    width: 100%;
    height: 7vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
}

.parallax>use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .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);
    }
}

「点点赞赏，手留余香」

还没有人赞赏，快来当第一个赞赏的人吧！

给小王总打赏

予人玫瑰，手有余香