百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

前端案例·程序员的浪漫:流星雨背景

ztj100 2025-07-09 18:39 3 浏览 0 评论

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

（1）方式1：简单版本

【1】先看实现效果

【2】再看完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<!-- 
	 CSS部分：
	 body设置为黑色背景，并隐藏溢出内容。
	 .meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。
	 @keyframes meteor定义了流星从屏幕顶部移动到底部的动画，并逐渐消失。
	 
	 JavaScript部分：
	 createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。
	 setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
	 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
	 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星雨特效</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }

        .meteor {
            position: absolute;
            width: 2px;
            height: 100px;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
            animation: meteor 1s linear infinite;
        }

        @keyframes meteor {
            0% {
                transform: translateY(-100px) rotate(-45deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(-45deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

（2）方式2：升级版本

【1】先看实现效果

【2】再看实现思路

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

【3】最后完整代码

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>流星雨特效</title>
		<!-- 
	 CSS部分：
	 body设置为黑色背景，并隐藏溢出内容。
	 .meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。
	 @keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
	 
	 JavaScript部分：
	 createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。
	 setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
	 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
	 -->
		<style>
			body {
				margin: 0;
				overflow: hidden;
				background-color: #000;
			}

			.meteor {
				position: absolute;
				width: 2px;
				height: 100px;
				background: linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
				animation: meteor 1s linear infinite;
			}

			@keyframes meteor {
				0% {
					/* 左上角 */
					transform: translate(0, 0) rotate(-45deg);
					opacity: 1;
				}

				100% {
					/* 右下角 */
					transform: translate(100vw, 100vh) rotate(-45deg);
					opacity: 0;
				}
			}
		</style>
	</head>
	<body>
		<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.appendChild(meteor);
				}

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

			setInterval(createMeteor, 500);
		</script>
	</body>
</html>

（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】最后完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星雨与星光闪闪特效</title>
	<!-- 
	 CSS部分：
	 body设置为黑色背景，并隐藏溢出内容。
	 .star类定义了星星的样式，使用border-radius实现圆形，并使用@keyframes twinkle实现星星闪烁的动画。
	 .meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。
	 @keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。
	 
	 JavaScript部分：
	 createStar函数用于创建星星元素，并设置其初始位置和动画持续时间。
	 createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。
	 setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。
	 当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。
	 在页面加载时，创建100颗星星。

	 -->
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            position: relative;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: #fff;
            border-radius: 50%;
            animation: twinkle 1s infinite alternate;
        }

        @keyframes twinkle {
            0% {
                opacity: 0.5;
            }
            100% {
                opacity: 1;
            }
        }

        .meteor {
            position: absolute;
            width: 2px;
            height: 100px;
            background: linear-gradient(to bottom right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
            animation: meteor 1s linear infinite;
        }

        @keyframes meteor {
            0% {
                transform: translate(0, 0) rotate(-45deg);
                opacity: 1;
            }
            100% {
                transform: translate(100vw, 100vh) rotate(-45deg);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <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>
</body>
</html>


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

相关推荐

前端案例·程序员的浪漫:流星雨背景

如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！（1）方式1：简单版本【1】先看实现效果...

UI样式iPod classic的HTML本地音乐播放器框架

PS：音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...

JavaScript 强制回流问题及优化方案

JavaScript代码在运行过程中可能会强制触发浏览器的回流（Reflow）...

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

最近Ai火的同时，Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor，使用免费版本搞一个零基础教程...

19年前司机被沉尸水库!凶手落网，竟已是身家千万的大老板

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

全民健身网络热度调查“居家健身”成为第一网络热词

]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...

取代JavaScript库的10个现代Web API及详细实施代码

为什么浏览器内置的API你还在用某个臃肿的Javascript库呢？用内置的API有什么好处呢？Web平台经历了巨大演进，引入了强大的原生API，不再需要臃肿的JavaScript库。现代浏览器现已支...

前端文件下载的N种姿势:从简单到高级

文件下载是web开发里一个非常常见的功能，无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求，每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...

JavaScript 性能优化方法（js前端性能优化）

JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流，影响性能。使用文档片段（DocumentFragment）或虚拟DOM技术减少直接操作。...

DOM节点的创建、插入、删除、查找、替换

在前端开发中，js与html联系最紧密的莫过于对DOM的操作了，本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...

前端里的拖拖拽拽（拖拽式前端框架）

最近在项目中使用了react-dnd，一个基于HTML5的拖拽库，“拖拽能力”丰富了前端的交互方式，基于拖拽能力，会扩展各种各样的拖拽反馈效果，因此有必要学习了解，最好的学习方式就是实操！...

大模型实战:Flask+H5三件套实现大模型基础聊天界面

本文使用Flask和H5三件套（HTML+JS+CSS）实现大模型聊天应用的基本方式话不多说，先贴上实现效果：流式输出：思考输出：聊天界面模型设置：模型设置会话切换：前言大模型的聊天应用从功能...

SSE前端（sse前端数据）

<!DOCTYPEhtml><htmllang="zh-CN"><head>...

课堂点名总尴尬?试试 DeepSeek，或能实现点名自由!(附教程)

2025年2月26日"你有没有经历过这样的场景？老师拿着花名册扫视全班：'今天我们来点名...'那一刻心跳加速，默念：'别点我！'但现在，我要...

我会在每个项目中复制这10个JS代码片段

你是否也有这种感觉：在搭建新项目时，你会想："这个函数我是不是已经写过了...在某个地方？"是的——我也是。所以在开发了数十个React、Node和全栈应用后，我不再重复造轮子。我创建...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.