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
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老了敲不动了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值