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

最新推荐文章于 2023-03-24 11:57:21 发布
最新推荐文章于 2023-03-24 11:57:21 发布
阅读量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实现波浪天气效果
qq_45921597的博客
10-06 495
【代码】js实现波浪天气效果。
css实现圆球旋像水波波动_Three.js图像波动特效
weixin_39814369的博客
11-24 482
近些年，我们经常会在一些网站上看到些炫酷的图片特效，这些效果大部分都是用WEBGL技术实现的， 借助shader我们可以实现css无法做到的炫酷视觉效果 。随着这门技术的兼容性越来越好，普及率越来越高，掌握它必将为你工作中的加分项。还在等什么？一起来学习下吧。这次我们用three.js来实现一个图像波动特效，剖析其实现原理，最终可以举一反三，变成自己的东西，先来看效果。图片变形特效演示实...
原生js水波纹特效
qq_35907133的博客
11-08 736
原理，通过监听按下事件，获取到点击坐标，将获取到的坐标通过class代入到自定义变量中，css中写入相关样式，引用伪元素，只需改变点击坐标点即可
css实现波浪效果border-radius
weixin_43294560的博客
11-10 2042
波浪核心:让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
css3+js实现水波纹效果
03-28
css3+js实现水波纹效果，跟随点击位置为中心扩散，效果很不错，适用于主流浏览器。
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+...
神奇！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...
使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单
GBin1.com
09-12 961
日期：2012-9-11  来源：GBin1.com 在线演示  本地下载 在今天的教程中，我们将使用jQuery开发一个单页面的网站，并且添加超酷的波浪动画背景效果到导航菜单上，希望大家能够喜欢！ 主要开发使用插件： jQuery one page nav：用来生成单页面网站典型的滚动效果jQuery scrollTo.js：单页面插件依赖类库jQuery b
JS水波效果
11-30
javascript实现的水波效果，使用HTML canvas标签实现显示界面
4种动态波浪文字动画js特效.zip
07-04
一款可以实现4种波浪文字效果，波浪效果，反弹效果，振动波效果和翻转效果的动态波浪文字动画js特效。
html5背景泡泡,HTML5 canvas梦幻圆形泡泡动画背景特效
weixin_32762821的博客
06-25 515
background.js是一款HTML5 canvas梦幻圆形泡泡动画背景特效。通过background.js插件，你可以轻松的制作出带渐变效果的气泡动画背景效果，并且背景颜色能在4种颜色间平滑过渡转换。background.js插件的特点还有：支持4种渐变颜色。实现梦幻泡泡效果。动画平滑过渡效果。检测移动设备并尝试优化资源。纯JavaScript制作，没有任何依赖。使用方法在页面中引入back...
pixiJS制作水波效果
最新发布
walzm_的博客
03-24 985
使用`pixijs制作动态水波效果
vue实现语音旁边的音波效果
SunnyRun
05-20 1929
前端实现语音录制功能 背景：在H5页面实现移动端的语音录制，需要实现写相关的css波纹效果。 代码片段 <template> <div class="sound-sonic_wave"> <div class="wave w1"></div> <div class="wave w2"></div> </div> </template> <style lang="less" sc
很酷的波浪线canvas动态js特效
ICode联盟
09-17 418
很酷的波浪线canvas动态特效，可以作为网页背景动效，颜色不断变化。
css3水波特效
L_melody的博客
11-05 1049
CSS3水波特效： @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { ...
html5+css3时间音频波动,css3 做成的音频波动效果
weixin_31782323的博客
06-09 509
音频波效果#container{position:relative;}#container span{width:5px;height: 5px;top:0px;position:absolute;background:red;-webkit-animation: bodong 0.5s infinite ease;}#container span:first-child{left:0px;-w...
箭头函数和原函数进行相加
qq_44170622的博客
09-13 527
function add(x,y) { return x+y } console.log(add(1,3)) const sum =(num1,num2) =>num1+num2 console.log(sum(1,3)) 都能实现相同的效果
JS+CSS实现鼠标感应渐变显示隐藏DIV技术解析
此文档探讨的技术就是如何利用JavaScript的事件监听和CSS的样式控制，来实现当鼠标移动到特定区域（如一个元素或链接）上时，一个隐藏的DIV层逐渐显示出来，鼠标离开后又渐变隐藏。以下是对这个技术的详细解释： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值