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


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

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

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

简单的演示

https://demo.shaosiming.net/wave/index.html

文章内容配图展示

SVG代码

把此代码插入到你需要使用波浪的html当中即可。

<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>

需要注意的就是fill="rgba(255, 255, 255,1)"是波浪的颜色,采用16进制的颜色代码,前面的三个255是颜色,后面的1则代表透明度。其他的0.7/0.5/0.3也是透明度。一共分为4个,最后一个是不透明的,这样可以和下方颜色融合。这些颜色你是可以随意更改的,但是后面的透明度最好不要调整,否则会有点不和谐。

CSS代码

.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);
    }
}

如果没什么需要的话,建议不要更改CSS默认的效果,如果非要改,改一下.waves里面的长宽高就行了。



版权声明

本文作者 软软软三岁哟 / 文章来源: 少司命博客

本文链接https://www.shaosiming.net/jskz/html5css3/38.html

转载分享:如果你要转载或者分享本篇文章,请注明作者/出处以及原文链接即可!

侵权行为:如果文章内容侵犯了您的权益,还请麻烦来信告知删除内容。


发表评论

检测到您还未登录,需要登录后才能发表评论!

注册 or 登录

文章评论 0 条评论,你也快来参与吧!

还没有评论呢~快来一鸣惊人吧!

博主业务范围

- Job requirements accepted by bloggers -

img

- 网站建设 -

提供一站式建站服务
服务器/域名/程序/备案全包

联系博主
img

- 布局调整 -

优化CSS构架布局
主要针对前端页面美化

联系博主
img

- 模板制作 -

图转HTML/仿站/原创
支持套入市场主流程序

联系博主
img

- 定制服务 -

提供私人专项定制服务
疑难杂症问题解决

联系博主