前端案例·程序员的浪漫:流星雨背景
ztj100 2025-07-09 18:39 33 浏览 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】再看实现思路
- CSS部分：
body设置为黑色背景，并隐藏溢出内容。.meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。@keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。 - JavaScript部分：
createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。 - 当流星动画结束时，使用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】再看实现思路
- CSS部分：
body设置为黑色背景，并隐藏溢出内容。.star类定义了星星的样式，使用border-radius实现圆形，并使用@keyframes twinkle实现星星闪烁的动画。.meteor类定义了流星的样式，使用linear-gradient实现流星的渐变效果。@keyframes meteor定义了流星从左上角移动到右下角的动画，并逐渐消失。 - JavaScript部分：
createStar函数用于创建星星元素，并设置其初始位置和动画持续时间。createMeteor函数用于创建流星元素，并设置其初始位置和动画持续时间。setInterval(createMeteor, 500)每隔500毫秒创建一个新的流星元素。当流星动画结束时，使用animationend事件监听器将其从DOM中移除，以避免内存泄漏。 - 在页面加载时，创建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>如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！
相关推荐
- Linux集群自动化监控系统Zabbix集群搭建到实战
-
自动化监控系统...
- systemd是什么如何使用_systemd/system
-
systemd是什么如何使用简介Systemd是一个在现代Linux发行版中广泛使用的系统和服务管理器。它负责启动系统并管理系统中运行的服务和进程。使用管理服务systemd可以用来启动、停止、...
- Linux服务器日常巡检脚本分享_linux服务器监控脚本
-
Linux系统日常巡检脚本，巡检内容包含了，磁盘，...
- 7，MySQL管理员用户管理_mysql 管理员用户
-
一、首次设置密码1.初始化时设置（推荐）mysqld--initialize--user=mysql--datadir=/data/3306/data--basedir=/usr/local...
- Python数据库编程教程:第 1 章 数据库基础与 Python 连接入门
-
1.1数据库的核心概念在开始Python数据库编程之前，我们需要先理解几个核心概念。数据库（Database）是按照数据结构来组织、存储和管理数据的仓库，它就像一个电子化的文件柜，能让我们高效...
- Linux自定义开机自启动服务脚本_linux添加开机自启动脚本
-
设置WGCloud开机自动启动服务init.d目录下新建脚本在/etc/rc.d/init.d新建启动脚本wgcloudstart.sh，内容如下...
- linux系统启动流程和服务管理，带你进去系统的世界
-
Linux启动流程Rhel6启动过程：开机自检bios-->MBR引导-->GRUB菜单-->加载内核-->init进程初始化Rhel7启动过程：开机自检BIOS-->M...
- CentOS7系统如何修改主机名_centos更改主机名称
-
请关注本头条号，每天坚持更新原创干货技术文章。如需学习视频，请在微信搜索公众号“智传网优”直接开始自助视频学习1.前言本文将讲解CentOS7系统如何修改主机名。...
- 前端工程师需要熟悉的Linux服务器(SSH 终端操作)指令
-
在Linux服务器管理中，SSH（SecureShell）是远程操作的核心工具。以下是SSH终端操作的常用命令和技巧，涵盖连接、文件操作、系统管理等场景：一、SSH连接服务器1.基本连接...
- Linux开机自启服务完全指南:3步搞定系统服务管理器配置
-
为什么需要配置开机自启？想象一下：电商服务器重启后，MySQL和Nginx没自动启动，整个网站瘫痪！这就是为什么开机自启是Linux运维的必备技能。自启服务能确保核心程序在系统启动时自动运行，避免人工...
- Kubernetes 高可用(HA)集群部署指南
-
Kubernetes高可用（HA）集群部署指南本指南涵盖从概念理解、架构选择，到kubeadm高可用部署、生产优化、监控备份和运维的全流程，适用于希望搭建稳定、生产级Kubernetes集群...
- Linux项目开发,你必须了解Systemd服务!
-
1.Systemd简介...
- Linux系统systemd服务管理工具使用技巧
-
简介：在Linux系统里，systemd就像是所有进程的“源头”，它可是系统中PID值为1的进程哟。systemd其实是一堆工具的组合，它的作用可不止是启动操作系统这么简单，像后台服务...
- Linux下NetworkManager和network的和平共处
-
简介我们在使用CentoOS系统时偶尔会遇到配置都正确但network启动不了的问题，这问题经常是由NetworkManager引起的，关闭NetworkManage并取消开机启动network就能正...
欢迎 你 发表评论:
- 一周热门
-
-
MySQL中这14个小玩意，让人眼前一亮!
-
旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起
-
面试官:使用int类型做加减操作，是线程安全吗
-
C++编程知识:ToString()字符串转换你用正确了吗?
-
【Spring Boot】WebSocket 的 6 种集成方式
-
PyTorch 深度学习实战(26):多目标强化学习Multi-Objective RL
-
pytorch中的 scatter_()函数使用和详解
-
与 Java 17 相比，Java 21 究竟有多快?
-
基于TensorRT_LLM的大模型推理加速与OpenAI兼容服务优化
-
这一次，彻底搞懂Java并发包中的Atomic原子类
-
- 最近发表
-
- Linux集群自动化监控系统Zabbix集群搭建到实战
- systemd是什么如何使用_systemd/system
- Linux服务器日常巡检脚本分享_linux服务器监控脚本
- 7，MySQL管理员用户管理_mysql 管理员用户
- Python数据库编程教程:第 1 章 数据库基础与 Python 连接入门
- Linux自定义开机自启动服务脚本_linux添加开机自启动脚本
- linux系统启动流程和服务管理，带你进去系统的世界
- CentOS7系统如何修改主机名_centos更改主机名称
- 前端工程师需要熟悉的Linux服务器(SSH 终端操作)指令
- Linux开机自启服务完全指南:3步搞定系统服务管理器配置
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)