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

最新推荐文章于 2023-08-02 21:00:00 发布
最新推荐文章于 2023-08-02 21:00:00 发布
阅读量1k 收藏
点赞数
文章标签： html css3 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yigetutouzai/article/details/125830673
版权

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

先看看效果图：

 实现代码

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

 

努力学习的k
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js+css时钟效果 js+css时钟效果
04-18
js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+css时钟效果js+...
用css怎样实现波浪线,css如何实现波浪线和立方体
weixin_33946174的博客
08-04 1761
css如何实现波浪线和立方体发布时间：2020-10-22 14:39:51来源：亿速云阅读：91作者：小新这篇文章将为大家详细讲解有关css如何实现波浪线和立方体，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。最近的项目有做到要画出波浪线效果，这里是利用linear-gradient来实现，也就是画圆，然后利用底色来遮住部分圆；利用css3属性perspecti...
纯css3 svg 波浪底纹
扬帆前行
11-29 709
搞一个 css3 svg波浪底纹 svg外层的div（即容器壳不能丢掉position:relative;） 底纹的高度可根据自己需要修改.waves中的height <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>css3 底纹波浪</...
原生js水波纹特效
qq_35907133的博客
11-08 736
原理，通过监听按下事件，获取到点击坐标，将获取到的坐标通过class代入到自定义变量中，css中写入相关样式，引用伪元素，只需改变点击坐标点即可
js实现波浪天气效果
qq_45921597的博客
10-06 495
【代码】js实现波浪天气效果。
前端必学的CSS3波浪效果演示
热门推荐
风中追风
06-14 1万+
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效果，赶紧学起来吧，加在自己开发网页的底部，给页面增加一点活泼的气息~......
神奇！js+CSS+DIV实现文字颜色渐变效果
11-23
本文将详细讲解如何使用JavaScript (JS)、CSS和HTML的DIV元素来创建一个文字颜色渐变效果。 首先，我们来看CSS部分。CSS（Cascading Style Sheets）是用于控制网页元素样式的一门语言。在这个实例中，`body` 和 `h3...
HTML+CSS+JS 实现跨年祝福效果
12-16
纯HTML+CSS+JS 实现跨年祝福效果，跨年倒计时10秒钟，背景音乐里的声音也是倒数10秒钟，完美切合，鼠标点击产生烟花效果，并且烟花可以改成任意文字。年份根据系统时间自动生成。可自定义后面的happy new year 2022 ...
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
01-19
JS配合CSS实现的漂亮渐变背景特效6个实例 </title> [removed] var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas = !!(typeof(p_dCanvas.getContext...
纯CSS实现波浪效果
Muchen灬
08-17 1377
纯CSS实现波浪效果 步骤一：首先搭建好基本的布局样式 这里。Wava的长度设置为200%s是为了使用动画时能够更加好的展示。 步骤二：实现背景的透明度（实现渐变效果） 步骤三：使用绝对定位将三个波浪模块叠放在一起，并设置动画 在第二个模块中引入动画：animation: move_wave 10s linear infinite; 开始发生移动变化 ...
动态波浪效果threejs-waves
07-19
jquery实现动态波浪效果threejs-waves，随鼠标滑动而动
css3+js实现水波纹效果
03-28
css3+js实现水波纹效果，跟随点击位置为中心扩散，效果很不错，适用于主流浏览器。
HTML5变色波浪线条特效
06-24
HTML5变色波浪线条特效是一款基于HTML5 Canvas制作的全屏网页变色的波浪线条，发光的线条动画特效。
纯css3音阶波浪loading加载动画特效
09-04
纯css3音阶波浪loading加载动画特效
纯CSS3科幻水波纹动画特效.zip
07-04
纯CSS3科幻水波纹动画特效是一款水底波纹摇晃动画特效，游泳池底部水波纹特效。
用css怎样实现波浪线,Css3实现波浪线效果1
weixin_39983384的博客
08-04 4747
一、波浪线 ，常用.info::before {content: '';position: absolute;top: 30px;width: 100%;height: 0.25em;background:linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%)...
css实现波浪效果border-radius
weixin_43294560的博客
11-10 2045
波浪核心:让border-radius没到50%再滚动起来,再用其覆盖背景,背景设置overflow:hidden; 代码示例: div { position: relative; align-items: center; min-height: 100vh; background-color: rgb(118, 218, 255); overflow: hidden; } div::before, div::after { //生成两个borde
【波浪动态特效】基于jquery实现页面底部波浪动画效果(附完整源码下载)
最新发布
赏樱看雪撸代码
08-02 883
Jquery如何实现底部波浪动画，如何实现网站底部动态波浪效果，js实现页面波浪效果，前端页面实现网站底部波浪动态背景，jQuery网站底部动态波浪背景动画特效。
JS实现水波涟漪特效
weixin_52580677的博客
01-17 2686
JS实现水波涟漪效果 通过鼠标点击事件，获取当前鼠标点击位置，生成定义好的元素，从而实现效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值