使用 JS 实现七彩雨

在本文中，我们将使用 JS 构建一个生成雨水的容器。这是一场色彩随机的七彩雨。您可以随意使用颜色。首先，让我们看看我们在构建什么。

预览

在线演示地址：http://haiyong.site/qicaiyu

现在让我们看一下代码，我们如何让它工作。

HTML

<div class="rain-container"></div>

CSS

* {margin: 0;padding: 0;
}.rain-container {position: relative;background: #000;width: 100vw;height: 100vh;overflow: hidden;
}i {position: absolute;height: 120px;border-radius: 0 0 999px 999px;animation: animate 5s linear infinite;
}@keyframes animate {0% {transform: translateY(-120px);}100% {transform: translateY(calc(100vh + 120px));}
}

Javascript

const rainContainer = document.querySelector(".rain-container");// 雨滴的背景颜色
const background = ["linear-gradient(transparent, aqua)","linear-gradient(transparent, red)","linear-gradient(transparent, limegreen)","linear-gradient(transparent, white)","linear-gradient(transparent, yellow)"
];const amount = 100; // 雨滴的数量
let i = 0;// 循环并创建雨滴，然后添加到rainContainer
while (i < amount) {//  创建和元素const drop = document.createElement("i");//   雨滴的 CSS 属性const raindropProperties = {width: Math.random() * 5 + "px",positionX: Math.floor(Math.random() * window.innerWidth) + "px",delay: Math.random() * -20 + "s",duration: Math.random() * 5 + "s",bg: background[Math.floor(Math.random() * background.length)],opacity: Math.random() + 0.2};//   设置雨滴样式drop.style.width = raindropProperties.width;drop.style.left = raindropProperties.positionX;drop.style.animationDelay = raindropProperties.delay;drop.style.animationDuration = raindropProperties.duration;drop.style.background = raindropProperties.bg;drop.style.opacity = raindropProperties.opacity;//   将雨滴添加到雨滴容器中rainContainer.appendChild(drop);i++;
}

完整源码关注公众号【海拥】回复【代码】获取

Java、Python、算法知识体系 | PPT、简历模板 | 游戏源码 | IT行业趣味资讯 | 装机必备软件

都可关注公众号【海拥】回复【资料】获取

使用 JS 实现七彩雨相关推荐

Babel 陷财务困境，负责人13万年薪遭质疑，Vue.js作者尤雨溪发文力挺
整理 | Carol 出品 | CSDN(ID:CSDNnews) 最近,拥有百万用户的开源项目 Babel 宣布,由于花钱速度持续高于获取捐赠的速度,Babel 已经陷入了财务困境,当前剩余的资金将 ...
Vue.js 作者尤雨溪确认出席 VueConf 2019 上海
VueConf 2019 上海(第三届VueConf) 将于2019年6月8日在上海举办. 目前正在抢票中, 如果你对本次会议感兴趣可以移步大会网站:vue.w3ctech.com 如果你有关注过V ...
Vue.js 作者尤雨溪：TypeScript 与 JavaScript 并行才切合实际！
作者 | Evrone 译者 | 弯月,责编 | 杨碧玉头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews) 以下为译文: 简介尤雨溪是一名优秀的软件开发人员,同时是开 ...
JS 实现红包雨效果，倒计时开红包兼容移动端
本文实例为大家分享了Html实现移动端红包雨功能页面的具体代码,供大家参考,具体内容如下: JS代码 function randomNum(minNum, maxNum) {switch (argum ...
掘金 AMA：听 Vue.js 作者--尤雨溪谈 Vue.js 独立开发设计那些事
第七期沸点,掘金团队请来了Vue.js 的作者,全职独立开源开发者尤雨溪做了为期三天的 Ask Me Anything (AMA) 活动(已结束). 我们在此精选了一些来自用户的提问及尤小右(尤雨溪 ...
JS——红包雨（抢红包）
JS实现红包雨这里只是一个效果的实现,没有添加更多复杂的业务逻辑,方便直接拿来使用 PS.该版本会出现卡顿的情况,暂时还未解决,所以重新使用css新属性实现了一个:https://blog.csdn ...
怎样才能学好Vue，听听尤雨溪怎么说？
如果你想问前端最值得学习的框架是什么,我一定会毫不犹豫地告诉你是Vue. 无论你是技术小白还是前端工程师,Vue的重要性自不必多说.从首个Commit的提交到破茧重生的Vue3.Vite2,Vue凭借 ...
Vue涉及国家安全漏洞？尤雨溪亲自回应
文 | 局长出品 | OSC开源社区(ID:oschina2013) 两张来源不明的截图近日在业内被广泛传播,其内容是国家有关部门要求境内党政机关和重要企事业单位对两款开源项目 SonarQube ...
python django vue_Django+Vue.js构建项目
本文主要讲述如何从0开始,用Django和Vue.js构建一个项目.文章提要:Django与vue.js整合开发原理从头新建一个Django项目新建一个前端页面,使用vue应用在Django中设 ...

使用 JS 实现七彩雨

预览

Javascript

使用 JS 实现七彩雨相关推荐

最新文章

热门文章