“六一”儿童节就要到了，赶快为喜欢的ta下场星星雨吧~

前言：进来的明天就脱单~据说很灵验哦~哈哈哈，比心心❥(^_-)

明天就是儿童节了，作为孩子的我先祝自己节日快乐，我就给自己下场星星雨吧~

然后我也祝广大掘友儿童节快乐哈，我们都是可爱滴孩子~

介绍： 这个下星星雨的效果实现其实很简单，主要用定时器和创建元素就可以实现，还有一点就是要使用到随机数哦~话不多说，下面上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#box{position: relative;width: 100%;height: calc(100vh - 60px);background: #000;margin-top: 20px;}h2{text-align: center;color:pink;padding-top: 50px;}span{position: absolute;color: yellow;font-size: 40px;}</style>
</head>
<body><input type="button" value="start" id="btn"><div id="box"></div>
<script>document.getElementById('btn').onclick=function(){setInterval(function(){let x = parseInt(Math.random()*1100);let y = parseInt(Math.random()*600);let size = parseInt(Math.random()*40+12)document.getElementById('box').innerHTML="<h2>爱你哦~</h2><span id='xing'>★</span>";let xing = document.getElementById('xing');xing.style.top = y + "px";xing.style.left = x + "px";xing.style.fontSize = size + "px";},10)}</script>
</body>
</html>
复制代码

由于我没有办法录gif格式的图片，这里就不上效果图啦~大家可以自行运行看看哦

注意： 这里一定要给span加上position:absolute，让其脱离文档流，否则星星的位置是没有办法移动的

实现了这个星星雨之后，我们也可以实现爱心雨，money雨，花瓣雨，照片雨.....,总之，你想下什么雨就下什么雨，是不是很浪漫嘞（嘘~重点是还不花钱（坏笑脸））~

想了一下，我还是把爱心雨的部分代码也放过来吧，虽然和上面并无差异，那我为什么要放呢？？为了自己以后复制方便（一个字还是懒呗）

span{position: absolute;color: red;font-size: 40px;transform: rotate(90deg);}<script>document.getElementById('btn').onclick=function(){setInterval(function(){let x = parseInt(Math.random()*1100);let y = parseInt(Math.random()*600);let size = parseInt(Math.random()*80+12)document.getElementById('box').innerHTML="<h2>爱你哦~</h2><span id='xing'>❥</span>";let xing = document.getElementById('xing');xing.style.top = y + "px";xing.style.left = x + "px";xing.style.fontSize = size + "px";},10)}</script>
复制代码

最后：我想说，虽然代码的实现没有难度，但是，我有这份心啊~

最最后，再次祝大家儿童节快乐呢~

转载于:https://juejin.im/post/5cf0f365f265da1b7b317147

“六一”儿童节就要到了，赶快为喜欢的ta下场星星雨吧~相关推荐

回忆杀--致敬八零后的六一儿童节
今天就是六一儿童节了,小朋友们在这一天都是特别开心,因为今天属于他们是充满欢乐的日子.八零后的我们曾经也像他们一样,可是当时的生活条件和现在小朋友对比真是天壤之别.八零后的我们都曾童真过,顽皮过,也被 ...
2015年六·一儿童节——我
现是2015年的六一儿童节.按说儿童节对于一个己20岁的成年女生来讲已毫无渊渊,于是乎,我花费了将近半个下午的时间来解析自己:是否真的已经成人? 首先在外形上,毋庸置疑,已长成了大人的样子.1 ...
【游戏开发创新】Unity+人工智能，让小朋友的画成真，六一儿童节一起来画猫猫吧（Unity | 人工智能 | 绘图 | 爬虫 | 猫妖）
文章目录一.前言二.一起来画猫猫三.爬虫,无穷只猫四.猫猫作品展五.Unity制作讲解 1.界面素材 2.UGUI制作界面 3.分辨率适配 4.如何检测鼠标事件 5.世界坐标转局部坐标 6. ...
【六一儿童节】回忆一下“童年的记忆”
文章目录 @[TOC](文章目录) 前言一.EasyX带我们步入了童话的世界 1.1绘画哆啦A梦 2.2绘画出来喜羊羊二.我的六一故事总结前言我们都有过童年,并且从现在看来,童年是我们最希望 ...
七上八下猜数字_六一儿童节游园活动的项目和游戏规则.doc
"六一儿童节"游园活动的项目及游戏规则在纸上画一个人头,游戏者蒙上双眼,原地转五圈,而后让游戏者走向指定的位置,把"鼻子"贴到人头上,贴中者得奖. 二.夹珠 ...
六一儿童节艺术海报二维码图片在线生成
马上就要到六一儿童节了,与六一儿童有关的图片海报该怎么去制作呢?对于不懂的Photoshop的小白来说,要制作生成一张漂亮的六一儿童节相关的艺术海报就很麻烦,如果有在线的艺术海报生成平台那就可以了.我 ...
童年记忆中的六一儿童节
童年记忆中的六一儿童节我的童年是在农村长大的,在这里我度过了快乐的无忧无虑的童年时光,这里给我留下了许多美好回忆.童年有很多值得怀念和留恋的回忆,其中六一儿童节是我童年记忆中最美好的节日.在六一儿童 ...
六一儿童节到了，祝福普天下的宝宝节日快乐。
六一儿童节到了,祝福普天下的宝宝节日快乐. 可是大部分的爸爸妈妈都要上班,无法陪宝宝过自己的节日了,只能等到周末了才能补偿一下. 不知道宝宝在家玩得快乐不?可是孩子们的快乐是什么,我常常很疑惑.上周末 ...
2023年的六一儿童节，愿我们永远热泪盈眶，永远保持童心，致我们终将逝去的青春！
六一儿童节,是一个属于孩子们的节日.在这一天,孩子们可以尽情地玩耍.享受快乐.然而,对于我们这些已经长大的人来说,六一儿童节却意味着一种回忆,一种怀念,一种青春的逝去. 小时候,我们总是期待着六一儿童 ...

“六一”儿童节就要到了，赶快为喜欢的ta下场星星雨吧~

“六一”儿童节就要到了，赶快为喜欢的ta下场星星雨吧~相关推荐

最新文章

热门文章