HTML+CSS+JS＞简易星星雨

不羁的程序员~

已于 2022-06-20 13:26:37 修改

阅读量137

点赞数

分类专栏： JS HTML

于 2022-06-19 21:15:50 首次发布

本文链接：https://blog.csdn.net/qq_55172460/article/details/125362451

版权

HTML CSS动画 JavaScript 动态效果星星雨

关键词由CSDN通过智能技术生成

JS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易星星雨</title>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        i {
            position: absolute;
            top: 0;
            transition: all 0.3s;
            color: yellow;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: black;
        }

        section {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <section>

    </section>

</body>
<script>
    var sec = document.querySelector('section');
    var bool = true;
    function a() {
        var i = document.createElement('i');
        i.className = 'fa fa-star fa-spin';
        //不用图标可以用这个代替
        // i.innerHTML = '✦';
        sec.appendChild(i);

        var left = Math.floor(Math.random() * sec.offsetWidth - 400);
        i.style.left = left + 'px';
        // console.log(left);
        var top = 0;
        var slant = left;
        function c() {
            i.style.top = top + 'px'; top += 10;
            i.style.left = slant + 'px'; slant += 10;
            if (top >= sec.offsetHeight || slant >= sec.offsetWidth) {
                // top = 0;
                i.remove();
            }
        }
        // 计时器
        setInterval(c, 80);
    }
    // 计时器
    setInterval(a, 800);
</script>

</html>