今天又来分享一个网页特效,自己瞎写的,类似一个波浪效果,并且有背景渐变,就叫做底部渐变波浪把
先看看效果图:
实现代码
实现原理也很简单,就是使用@keyframes定义动画函数,然后对每个元素应用animation属性,设置不同的延迟播放时间,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>底部波浪效果</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
counter-reset: section;
min-height: 100vh;
background-color: #222;
}
#bottom{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: end;
overflow: hidden;
}
.wave{
--theme-bg: rgb(87, 115, 120);
margin: 0 6px;
position: relative;
display: inline-block;
height: 150px;
width: 40px;
}
.wave .before{
content: '';
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
height: 150px;
width: 40px;
z-index: 2;
background-color: #289cad;
clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
transition: background-color 3s;
}
.wave .after{
content: '';
display: inline-block;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
height: 150px;
width: 40px;
background-color: #303030;
clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
}
.wave:nth-child(1) .before{
animation: 3s upDown infinite forwards;
}
.wave:nth-child(2) .before{
animation: 3s upDown infinite forwards 0.08s;
}
.wave:nth-child(3) .before{
animation: 3s upDown infinite forwards 0.16s;
}
.wave:nth-child(4) .before{
animation: 3s upDown infinite forwards 0.24s;
}
.wave:nth-child(5) .before{
animation: 3s upDown infinite forwards 0.32s;
}
.wave:nth-child(6) .before{
animation: 3s upDown infinite forwards 0.4s;
}
.wave:nth-child(7) .before{
animation: 3s upDown infinite forwards 0.48s;
}
.wave:nth-child(8) .before{
animation: 3s upDown infinite forwards 0.56s;
}
.wave:nth-child(9) .before{
animation: 3s upDown infinite forwards 0.64s;
}
.wave:nth-child(10) .before{
animation: 3s upDown infinite forwards 0.72s;
}
.wave:nth-child(11) .before{
animation: 3s upDown infinite forwards 0.8s;
}
.wave:nth-child(12) .before{
animation: 3s upDown infinite forwards 0.88s;
}
.wave:nth-child(12) .before{
animation: 3s upDown infinite forwards 0.88s;
}
.wave:nth-child(13) .before{
animation: 3s upDown infinite forwards 0.88s;
}
.wave:nth-child(14) .before{
animation: 3s upDown infinite forwards 0.96s;
}
.wave:nth-child(15) .before{
animation: 3s upDown infinite forwards 1.04s;
}
.wave:nth-child(16) .before{
animation: 3s upDown infinite forwards 1.12s;
}
.wave:nth-child(17) .before{
animation: 3s upDown infinite forwards 1.20s;
}
.wave:nth-child(18) .before{
animation: 3s upDown infinite forwards 1.28s;
}
.wave:nth-child(19) .before{
animation: 3s upDown infinite forwards 1.36s;
}
.wave:nth-child(20) .before{
animation: 3s upDown infinite forwards 1.44s;
}
.wave:nth-child(21) .before{
animation: 3s upDown infinite forwards 1.52s;
}
.wave:nth-child(22) .before{
animation: 3s upDown infinite forwards 1.6s;
}
.wave:nth-child(23) .before{
animation: 3s upDown infinite forwards 1.68s;
}
.wave:nth-child(24) .before{
animation: 3s upDown infinite forwards 1.76s;
}
.wave:nth-child(25) .before{
animation: 3s upDown infinite forwards 1.84s;
}
.wave:nth-child(26) .before{
animation: 3s upDown infinite forwards 1.92s;
}
.wave:nth-child(27) .before{
animation: 3s upDown infinite forwards 2s;
}
.wave:nth-child(1) .after{
animation: 3s upDown infinite forwards 1s;
}
.wave:nth-child(2) .after{
animation: 3s upDown infinite forwards 1.08s;
}
.wave:nth-child(3) .after{
animation: 3s upDown infinite forwards 1.16s;
}
.wave:nth-child(4) .after{
animation: 3s upDown infinite forwards 1.24s;
}
.wave:nth-child(5) .after{
animation: 3s upDown infinite forwards 1.32s;
}
.wave:nth-child(6) .after{
animation: 3s upDown infinite forwards 1.4s;
}
.wave:nth-child(7) .after{
animation: 3s upDown infinite forwards 1.48s;
}
.wave:nth-child(8) .after{
animation: 3s upDown infinite forwards 1.56s;
}
.wave:nth-child(9) .after{
animation: 3s upDown infinite forwards 1.64s;
}
.wave:nth-child(10) .after{
animation: 3s upDown infinite forwards 1.72s;
}
.wave:nth-child(11) .after{
animation: 3s upDown infinite forwards 1.8s;
}
.wave:nth-child(12) .after{
animation: 3s upDown infinite forwards 1.88s;
}
.wave:nth-child(12) .after{
animation: 3s upDown infinite forwards 1.88s;
}
.wave:nth-child(13) .after{
animation: 3s upDown infinite forwards 1.88s;
}
.wave:nth-child(14) .after{
animation: 3s upDown infinite forwards 1.96s;
}
.wave:nth-child(15) .after{
animation: 3s upDown infinite forwards 2.04s;
}
.wave:nth-child(16) .after{
animation: 3s upDown infinite forwards 2.12s;
}
.wave:nth-child(17) .after{
animation: 3s upDown infinite forwards 2.20s;
}
.wave:nth-child(18) .after{
animation: 3s upDown infinite forwards 2.28s;
}
.wave:nth-child(19) .after{
animation: 3s upDown infinite forwards 2.36s;
}
.wave:nth-child(20) .after{
animation: 3s upDown infinite forwards 2.44s;
}
.wave:nth-child(21) .after{
animation: 3s upDown infinite forwards 2.52s;
}
.wave:nth-child(22) .after{
animation: 3s upDown infinite forwards 2.6s;
}
.wave:nth-child(23) .after{
animation: 3s upDown infinite forwards 2.68s;
}
.wave:nth-child(24) .after{
animation: 3s upDown infinite forwards 2.76s;
}
.wave:nth-child(25) .after{
animation: 3s upDown infinite forwards 2.84s;
}
.wave:nth-child(26) .after{
animation: 3s upDown infinite forwards 2.92s;
}
.wave:nth-child(27) .after{
animation: 3s upDown infinite forwards 3s;
}
@keyframes upDown {
0%{
height: 150px;
clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
}
50%{
height: 25px;
clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 15px, 100% 0, 100% 100%, 0 100%);
}
100%{
height: 150px;
clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, 100% 15px, 100% 100%, 0 100%);
}
}
</style>
</head>
<body>
<div id="bottom">
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
<span class="wave">
<span class="before"></span>
<span class="after"></span>
</span>
</div>
</body>
<script>
(function () {
const befores = Array.from(document.querySelectorAll('.wave .before'));
let rgb=getRandomRGB()
befores.forEach(item=>{
item.style.backgroundColor = rgb
})
delete rgb
setInterval(()=>{
let rgb=getRandomRGB()
befores.forEach(item=>{
item.style.backgroundColor = rgb
})
},3000)
function getRandomRGB() {
let r= Math.random()*255
let g= Math.random()*255
let b= Math.random()*255
return `rgb(${r},${g},${b})`
}
})()
</script>
</html>