“六一”儿童节就要到了，赶快为喜欢的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下场星星雨吧~

猜你喜欢