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 rgbsetInterval(()=>{let rgb=getRandomRGB()befores.forEach(item=>{item.style.backgroundColor = rgb})},3000)function getRandomRGB() {let r= Math.random()*255let g= Math.random()*255let b= Math.random()*255return `rgb(${r},${g},${b})`}})()
</script>
</html>

JS+CSS实现一个底部渐变波浪效果相关推荐

android 底部tab效果,Android 仿微信底部渐变Tab效果
先来看一下效果图除了第三个的发现Tab有所差别外,其他的基本还原了微信的底部Tab渐变效果每个Tab都是一个自定义View,根据ImageView的tint属性来实现颜色渐变效果,tint属性的使 ...
html轮播台袋效果,使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面轮播图效果 < > css页面 carousel.css #main{ width: 655px; height: 361px; position: relative; } ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...
html页面 tab JS滑动切换,JS+CSS实现滑动切换tab菜单效果
本文实例讲述了JS+CSS实现滑动切换tab菜单效果.分享给大家供大家参考.具体如下: 这是风格简单的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标不需要点击,滑动门效果 ...
JS + CSS 做一个简易九宫格抽奖
目录 1.CSS样式 2.JS动作大概做出来就是这个样子,alert的弹窗样式我也没改,就默认的. 1.CSS样式样式大概分以下方面: 创建外框及内框样式: 8个奖品小方格和中间按钮小方格: 奖品 ...
使用HTML+CSS完成一个简单的立体字效果
使用HTML+CSS完成一个简单的立体字效果* 此处用木兰辞来举列子来看看效果 ps:技术不佳大佬们轻喷 /*标题及其立体效果*/ .Header {/*font-size: 50px;*//*fo ...
html魔方转动效果,简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

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

实现代码

JS+CSS实现一个底部渐变波浪效果相关推荐

最新文章

热门文章