SVG网页波浪动画效果背景

港控/mmm° 2023-10-08 21:16 52阅读 0赞

给大家分享一个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部分

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

</g>

</g>

</svg>

<defs>

<path id="wave"

fill="purple"></path>

</defs>

<g>

</g>