SVG网页波浪动画效果背景

2022-09-02 0 237
资源来源于互联网和网友投稿如有侵权请及时联系客服下架
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险以及产生法律纠纷与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除。
如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

本站只提供资源,不提供技术支持,介意勿下!源码太多站长无法每款都进行测试请自行甄别,虚拟产品售出无退换,下载链接如有失效请及时联系客服

网站部分资源上传至小程序供免费下载

百度小程序 微信小程序

SVG网页波浪动画效果背景
免费给大家分享一个SVG网页波浪动画效果背景

CSS部分

<style>
.body {
min-height: 100vh;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
}
:root {
--wave: #fff;
--bg: #364c63;
}
.main {
background: var(--bg);
-webkit-box-flex: 1;
flex: 1;
width: 100vw;
position: relative;
overflow: hidden;
}

.wave {
position: absolute;
bottom: -5%;
left: 0;
right: 0;
}

.wave:nth-of-type(1) {
--speed: 60;
--opacity: 0.3;
--height: 12;
--width: 320;
--lightness: 90;
--rise: 2;
}

.wave:nth-of-type(2) {
--speed: 30;
--opacity: 0.6;
--height: 10;
--width: 200;
--lightness: 95;
--rise: 5;
}

.wave:nth-of-type(3) {
--speed: 18;
--opacity: 1;
--height: 6;
--width: 180;
--lightness: 100;
--rise: 0;
}

.wave {
height: calc(var(--height, 0) * 1vh);
width: calc(var(--width, 0) * 1vw);
-webkit-animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
animation: rise calc(var(--speed, 0) * 1.5s) infinite linear;
}

@media (max-width: 480px) {
.wave {
height: calc(var(--height, 0) * 0.75vh);
}
}

.wave path {
fill: hsl(0, 0%, calc(var(--lightness, 0) * 1%));
-webkit-animation: wave calc(var(--speed, 0) * 1s) infinite linear;
animation: wave calc(var(--speed, 0) * 1s) infinite linear;
}

@-webkit-keyframes wave {
to {
-webkit-transform: translate(-761px, 0);
transform: translate(-761px, 0);
}
}

@keyframes wave {
to {
-webkit-transform: translate(-761px, 0);
transform: translate(-761px, 0);
}
}

@-webkit-keyframes rise {
50% {
-webkit-transform: translate(0, calc(var(--rise) * -1%));
transform: translate(0, calc(var(--rise) * -1%));
}
}

@keyframes rise {
50% {
-webkit-transform: translate(0, calc(var(--rise) * -1%));
transform: translate(0, calc(var(--rise) * -1%));
}
}
</style>

HTML部分

<body class="body">

    <main class="main">

        <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">

            <defs>

                <path id="wave"

                    d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"

                    fill="purple"></path>

            </defs>

            <g>

                <use href="#wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>

            </g>

            <g transform="translate(761 0)">

                <use href="#wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>

            </g>

        </svg>

        <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">

            <defs>

                <path id="wave"

                    d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"

                    fill="purple"></path>

            </defs>

            <g>

                <use href="#wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>

            </g>

            <g transform="translate(761 0)">

                <use href="#wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>

            </g>

        </svg>

        <svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 762 52.917" preserveAspectRatio="none">

            <defs>

                <path id="wave"

                    d="M0 0c22.863 0 40.637 25.93 63.5 25.93S104.137 0 127 0s40.637 25.93 63.5 25.93S231.137 0 254 0s40.637 25.93 63.5 25.93S358.137 0 381 0s40.637 25.93 63.5 25.93S485.137 0 508 0s40.637 25.93 63.5 25.93S612.137 0 635 0s40.637 25.93 63.5 25.93S739.137 0 762 0v52.917H0z"

                    fill="purple"></path>

            </defs>

            <g>

                <use href="#wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>

            </g>

            <g transform="translate(761 0)">

                <use href="#wave" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>

            </g>

        </svg>

    </main>

</body>

							
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)
常见问题

相关文章

发表评论
暂无评论