JS+CSS实现一个底部渐变波浪效果

今天又来分享一个网页特效,自己瞎写的,类似一个波浪效果,并且有背景渐变,就叫做底部渐变波浪把

先看看效果图:

 实现代码

实现原理也很简单,就是使用@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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值