SVG网页波浪动画效果背景

最新推荐文章于 2024-04-26 09:49:34 发布

老了敲不动了

最新推荐文章于 2024-04-26 09:49:34 发布

阅读量802

点赞数

文章标签： java Powered by 金山文档

本文链接：https://blog.csdn.net/2301_76965813/article/details/129698434

版权

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