CSS+JS 实现最简单的流星雨

最新推荐文章于 2024-06-28 10:21:38 发布

小C好好干饭

最新推荐文章于 2024-06-28 10:21:38 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js css html 文章标签： css html html5

本文链接：https://blog.youkuaiyun.com/qq_44408913/article/details/120757048

js 同时被 3 个专栏收录

1 篇文章

订阅专栏

css

1 篇文章

订阅专栏

html

1 篇文章

订阅专栏

CSS+JS 最简单的流星雨

这里流星用的是图片
思路：
1.通过CSS动画将流星进行显示+位移+隐藏
2.通过JS将流星随机到网页的位置,动画播放完成后清除流星避免网页卡顿。

<!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>
    <style>
        html,
        body {
            margin: 0;
            height: 100%;
        }

        /* 星空背景*/
        .background {
            height: 100%;
            width: 100%;
            background: url('images/星空.jpg')no-repeat;
            background-size: 100%;
            background-position: top left;
            background-position: 0px 0px;
            background-position: 100% 100%;
            position: relative;
            overflow: hidden;
        }

        /* 流星样式 */
        .meteor {
            position: absolute;
            animation: 2s myMeteor;
            /* animation-iteration-count: infinite; */
            opacity: 0;
        }

        /* 流星动画 按百分比帧设定属性 */
        @keyframes myMeteor {
            0% {
                opacity: 0;
                transform: translate(100%, -100%);
            }

            25% {
                opacity: 1;
            }

            50% {
                opacity: 0.3;
            }

            100% {
                opacity: 0;
                transform: translate(-50%, 50%);
            }
        }
    </style>
</head>

<body>
    <div class="background"></div>
</body>
<script>
    var bg = document.querySelector('.background')
    // 每隔2000毫秒创建一个流星 
    var timer = setInterval(createMeteor, 2000)
    // 创建流星
    function createMeteor() {
        // 创建图片
        let img = document.createElement('img');
        // 设置图片
        img.src = 'images/流星.png'
        // 设置类&动画
        img.className = 'meteor'
        // 设置位置
        let left = parseInt(Math.random() * 1000) % 100
        let top = parseInt(Math.random() * 1000) % 100
        img.style.left = left + '%'
        img.style.top = top + '%'
        // div下添加流星
        bg.appendChild(img)
        // 动画完成后清除流星
        setTimeout(() => {
            bg.removeChild(img)
        }, 3500)
    }
</script>

</html>