前端案例·程序员的浪漫:流星雨背景
itomcoil 2025-09-21 16:26 9 浏览
如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！
（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>如果文章对你有收获，还请不要吝啬【点赞收藏评论】三连哦，你的鼓励将是我成长助力之一！谢谢！
相关推荐
- 《Queendom》宣布冠军!女团MAMAMOO四人激动落泪
-
网易娱乐11月1日报道据台湾媒体报道，南韩女团竞争回归的生死斗《Queendom》昨(10/31)晚播出大决赛，并以直播方式进行，6组女团、女歌手皆演唱新歌，并加总前三轮的赛前赛、音源成绩与直播现场投...
- 正确复制、重写别人的代码，不算抄袭
-
我最近在一篇文章提到，工程师应该怎样避免使用大量的库、包以及其他依赖关系。我建议的另一种方案是，如果你没有达到重用第三方代码的阈值时，那么你就可以自己编写代码。在本文中，我将讨论一个在重用和从头开始编...
- HTML DOM tr 对象_html event对象
-
tr对象tr对象代表了HTML表格的行。HTML文档中出现一个<tr>标签，就会创建一个tr对象。tr对象集合W3C：W3C标签。集合描述W3Ccells返回...
- JS 打造动态表格_js如何动态改变表格内容
-
后台列表页最常见的需求：点击表头排序+一键全选。本文用原生js代码实现零依赖方案，涵盖DOM查询、排序算法、事件代理三大核心技能。效果速览一、核心思路事件入口：为每个<th>绑...
- 连肝7个晚上，总结了66条计算机网络的知识点
-
作者|哪吒来源|程序员小灰（ID:chengxuyuanxiaohui）计算机网络知识是面试常考的内容，在实际工作中经常涉及。最近，我总结了66条计算机网络相关的知识点。1、比较http0....
- Vue 中 强制组件重新渲染的正确方法
-
作者：MichaelThiessen译者：前端小智来源：hackernoon有时候，依赖Vue响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的...
- 为什么100个前端只有1人能说清?浏览器重排/重绘深度解析
-
面试现场的"致命拷问""你的项目里做过哪些性能优化？能具体讲讲重排和重绘的区别吗？"作为面试官，我在秋招季连续面试过100多位前端候选人，这句提问几乎成了必考题。但令...
- HTML DOM 介绍_dom4j html
-
HTMLDOM（文档对象模型）是一种基于文档的编程接口，它是HTML和XML文档的编程接口。它可以让开发人员通过JavaScript或其他脚本语言来访问和操作HTML和XML文档...
- JavaScript 事件——“事件流和事件处理程序”的注意要点
-
事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而NetscapeCommunicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收，然后逐级向上传播到较为不...
- 探秘 Web 水印技术_水印制作网页
-
作者：fransli，腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用，对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印（盲水印）...
- 国外顶流网红为流量拍摄性侵女学生?仅被封杀三月，回归仍爆火
-
曾经的油管之王，顶流网红DavidDobrik复出了。一切似乎都跟他因和成员灌酒性侵女学生被骂到退网之前一样：住在950万美元的豪宅，开着20万美元的阿斯顿马丁，每条视频都有数百万观看...人们仿佛...
- JavaScript 内存泄漏排查方法_js内存泄漏及解决方法
-
一、概述本文主要介绍了如何通过Devtools的Memory内存工具排查JavaScript内存泄漏问题。先介绍了一些相关概念，说明了Memory内存工具的使用方式，然后介绍了堆快照的...
- 外贸独立站，网站优化的具体内容_外贸独立站,网站优化的具体内容有哪些
-
Wordpress网站优化，是通过优化代码、数据库、缓存、CSS/JS等内容，提升网站加载速度、交互性和稳定性。网站加载速度，是Google搜索引擎的第一权重，也是SEO优化的前提。1.优化渲染阻塞。...
- 这8个CSS工具可以提升编程速度_css用什么编译器
-
下面为大家推荐的这8个CSS工具，有提供函数的，有提供类的，有提取代码的，还有收集CSS的统计数据的……请花费两分钟的时间看完这篇文章，或许你会找到意外的惊喜，并且为你的编程之路打开了一扇新的大门。1...
- vue的理解-vue源码 历史 简介 核心特性 和jquery区别 和 react对比
-
一、从历史说起Web是WorldWideWeb的简称，中文译为万维网我们可以将它规划成如下的几个时代来进行理解石器时代文明时代工业革命时代百花齐放时代石器时代石器时代指的就是我们的静态网页，可以欣...
- 一周热门
- 最近发表
- 标签列表
-
- ps图案在哪里 (33)
- super().__init__ (33)
- python 获取日期 (34)
- 0xa (36)
- super().__init__()详解 (33)
- python安装包在哪里找 (33)
- linux查看python版本信息 (35)
- python怎么改成中文 (35)
- php文件怎么在浏览器运行 (33)
- eval在python中的意思 (33)
- python安装opencv库 (35)
- python div (34)
- sticky css (33)
- python中random.randint()函数 (34)
- python去掉字符串中的指定字符 (33)
- python入门经典100题 (34)
- anaconda安装路径 (34)
- yield和return的区别 (33)
- 1到10的阶乘之和是多少 (35)
- python安装sklearn库 (33)
- dom和bom区别 (33)
- js 替换指定位置的字符 (33)
- python判断元素是否存在 (33)
- sorted key (33)
- shutil.copy() (33)