如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！

（1）方式1：简单版本

【1】先看实现效果

【2】再看完整代码

	
    
    
    
    


    <script>
        function createMeteor() {
            const meteor = document.createElement('div');
            meteor.className = 'meteor';
            meteor.style.left = Math.random() * window.innerWidth + 'px';
            meteor.style.animationDuration = Math.random() * 2 + 5 + 's';
            document.body.appendChild(meteor);

            meteor.addEventListener('animationend', () => {
                document.body.removeChild(meteor);
            });
        }

        setInterval(createMeteor, 500);
    </script>

（2）方式2：升级版本

【1】先看实现效果

【2】再看实现思路

1. CSS部分：
   body设置为黑色背景，并隐藏溢出内容。.meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。@keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
2. JavaScript部分：
   createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
3. 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。

【3】最后完整代码

	
		
		
		
		
		
	
	
		<script>
			// 控制流星的数量，避免随着时间越来越密集的出现流星
			let count = 30;
			function createMeteor() {
				const meteor = document.createElement('div');
				meteor.className = 'meteor';
				meteor.style.left = Math.random() * window.innerWidth + 'px';
				meteor.style.top = Math.random() * window.innerHeight + 'px';
				meteor.style.animationDuration = Math.random() * 2 + 3 + 's';
				count = document.body.children.length;
				if (count <= 30 document.body.appendchildmeteor meteor.addeventlisteneranimationend> {
					document.body.removeChild(meteor);
				});
			}

			setInterval(createMeteor, 500);
		</script>
	

（3）方式3：美化版本

【1】先看实现效果

【2】再看实现思路

1. CSS部分：
   body设置为黑色背景，并隐藏溢出内容。.star类定义了星星的样式，使用border-radius实现圆形，并使用@keyframes twinkle实现星星闪烁的动画。.meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。@keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
2. JavaScript部分：
   createStar函数用于创建星星元素，并设置其初始位置和动画持续时间。createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
3. 在页面加载时，创建100颗星星。

【3】最后完整源码

    
    
    
	
    


    <script>
        function createStar() {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.left = Math.random() * window.innerWidth + 'px';
            star.style.top = Math.random() * window.innerHeight + 'px';
            star.style.animationDuration = Math.random() * 2 + 1 + 's';
            document.body.appendChild(star);
        }

        function createMeteor() {
            const meteor = document.createElement('div');
            meteor.className = 'meteor';
            meteor.style.left = Math.random() * window.innerWidth + 'px';
            meteor.style.top = Math.random() * window.innerHeight + 'px';
            meteor.style.animationDuration = Math.random() * 2 + 1 + 's';
            document.body.appendChild(meteor);

            meteor.addEventListener('animationend', () => {
                document.body.removeChild(meteor);
            });
        }

        // 创建星星
        for (let i = 0; i < 100; i++) {
            createStar();
        }

        // 创建流星
        setInterval(createMeteor, 500);
    </script>

如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！