当前位置：首页 > article >正文

CSS3-流星雨

article 2026/3/8 13:59:17

1. 绘制标签

<div class="container"><span></span>
</div>

2. 设置div背景

在百度上搜索一幅星空的图片

<style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 高度100% */height: 100vh;/* 溢出隐藏 */overflow: hidden;}.container {background: url(xk1.jpg) no-repeat;width: 100%;height: 100%;position: absolute;/* 把背景图像扩展到足够大，使背景图像覆盖背景区域 */background-size: cover;/* 背景图像设置为正中间 */background-position: center;}
</style>

在这里插入图片描述

3. 绘制流星和尾巴

span {width: 10px;height: 10px;background-color: #fff;position: absolute;left: 50%;top: 50%;/* 圆角 */border-radius: 50%;/* 发光效果 0 x轴方向的长度0 y轴方向的长度10 阴影模糊度,只能为正数4  阴影的扩散半径				*/box-shadow: 0px 0 10px 4px rgba(255, 255, 255, 1);}span::before {content: "";width: 300px;height: 3px;/* 渐变背景 90度，由#fff 向完全透明渐变 */background: linear-gradient(90deg, #fff, transparent);position: absolute;top: 50%;
}

在这里插入图片描述

4. 添加背景缩放的动画

/* 定义动画 ,背景缩放*/
@keyframes animateBg {0%,100% {transform: scale(1);}50% {transform: scale(1.2);}
}

添加动画到 .container 的样式中
在这里插入图片描述

5. 流星动画

@keyframes animateLx {0% {/* 角度旋转315度，x方向移动0px */transform: rotate(315deg) translateX(0);opacity: 1;}90% {opacity: 1;}100% {/* 角度旋转315度，x方向移动-1000px 向左边移动 */transform: rotate(315deg) translateX(-1000px);opacity: 0;}
}

添加动画到span标签上
在这里插入图片描述

6. 为第一个span单独设置动画出现的位置，和动画效果

span:nth-child(1) {top: 0px;left: initial;right: 0px;/* 动画延迟时间 */animation-delay: 0s;/* 动画时长 */animation-duration: 1s;
}

请添加图片描述

7. 为第二个span单独设置动画出现的位置，和动画效果

span:nth-child(2) {top: 0px;right: 80px;left: initial;animation-delay: 0.1s;animation-duration: 3s;
}

在这里插入图片描述

请添加图片描述

8. 后续

每添加一个标记，就添加一个对应的样式，通过改变top ，right ，动画延时，动画时长等参数，生成不同的流星

请添加图片描述

9. 完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>流星雨划过天际的动画</title><style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 高度100% */height: 100vh;/* 溢出隐藏 */overflow: hidden;}.container {background: url(xk1.jpg) no-repeat;width: 100%;height: 100%;position: absolute;/* 把背景图像扩展到足够大，使背景图像覆盖背景区域 */background-size: cover;/* 背景图像设置为正中间 */background-position: center;/* 执行动画，时长，线性的，无限次数播放 */animation: animateBg 5s linear infinite;}span {width: 10px;height: 10px;background-color: #fff;position: absolute;left: 50%;top: 50%;/* 圆角 */border-radius: 50%;/* 发光效果 0 x轴方向的长度0 y轴方向的长度10 阴影模糊度,只能为正数4  阴影的扩散半径				*/box-shadow: 0px 0 10px 4px rgba(255, 255, 255, 1);animation: animateLx 3s linear infinite;}span::before {content: "";width: 300px;height: 3px;/* 渐变背景 90度，由#fff 向完全透明渐变 */background: linear-gradient(90deg, #fff, transparent);position: absolute;top: 50%;}/* 定义动画 ,背景缩放*/@keyframes animateBg {0%,100% {transform: scale(1);}50% {transform: scale(1.2);}}@keyframes animateLx {0% {transform: rotate(315deg) translateX(0);opacity: 1;}90% {opacity: 1;}100% {transform: rotate(315deg) translateX(-1000px);opacity: 0;}}span:nth-child(1) {top: 0px;right: 0px;left: initial;/* 动画延迟时间 */animation-delay: 0s;/* 动画时长 */animation-duration: 1s;}span:nth-child(2) {top: 0px;right: 80px;left: initial;animation-delay: 0.1s;animation-duration: 3s;}span:nth-child(3) {top: 80px;right: 0px;left: initial;animation-delay: 0.4s;animation-duration: 2s;}span:nth-child(4) {top: 0px;right: 10px;left: initial;animation-delay: 0.7s;animation-duration: 2s;}span:nth-child(5) {top: 0px;right: 400px;left: initial;animation-delay: 0.8s;animation-duration: 2.5s;}span:nth-child(6) {top: 0px;right: 600px;left: initial;animation-delay: 1s;animation-duration: 3s;}span:nth-child(7) {top: 300px;right: 0px;left: initial;animation-delay: 1.2s;animation-duration: 1.75s;}span:nth-child(8) {top: 0px;right: 700px;left: initial;animation-delay: 1.4s;animation-duration: 1.25s;}span:nth-child(9) {top: 0px;right: 1000px;left: initial;animation-delay: 0.75s;animation-duration: 2.25s;}span:nth-child(10) {top: 0px;right: 450px;left: initial;animation-delay: 2.75s;animation-duration: 2.25s;}</style></head><body><div class="container"><!--10个span--><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></body>
</html>

CSS3-流星雨

1. 绘制标签 <div class"container"><span></span> </div>2. 设置div背景在百度上搜索一幅星空的图片 <style>* {/* 初始化 */margin: 0;padding: 0;}body {/* 高度100% */height: 100vh;/* 溢出隐藏 */overflow: hidden;}.contai…...

编程日记 2026/2/28 19:14:53

数学建模第一节

目录前言一优化模型的类型二线性规划1 线性规划2 三 0-1规划总结前言数学建模主要是将问题转化为模型，然后再以编程的形式输出出来算法都知道，数学建模也需要用到算法，但是不是主要以编程形式展示，而是…...

编程日记 2026/3/3 1:42:04

Ⅰ 回字形二维数组 #include <iostream> #include <iomanip> using namespace std; int main(){int n;while(cin>>n,n){for(int i0; i<n;i){for(int j0; j<n; j){int upi, downn-i1, leftj, rightn-j1;cout<<min(min(up,down),min(left,right)…...

编程日记 2026/2/24 20:48:03

自动化立体仓库堆垛机HMI屏幕程序施耐德HMIGXU系列 Vijeo Designer功能设计

堆垛机HMI屏幕功能概况在自动化立体仓库堆垛机的HMI屏幕程序里，有着施耐德HMIGXU系列Vijeo Designer功能设计。此HMI程序运用标准的工程组织结构，凭借拖拽方式迅速构建人机交互界面。其主要功能涵盖：设备参数、设备状态、手动/自动操作控制、报警显示、IO信息监控等模块…...

编程日记 2026/3/3 4:04:09

孤儿进程与僵尸进程：Linux进程管理中的“隐形杀手”与“无主孤儿”

在Linux系统中，进程的生命周期管理是系统稳定运行的关键。其中，孤儿进程和僵尸进程是两种特殊状态，它们看似相似却暗藏玄门。本文将从定义、区别到处理方法，揭开它们的神秘面纱。一、孤儿进程：被“遗弃”的孩子&…...

编程日记 2026/3/7 22:20:50

信息系统运行管理员教程6--信息系统安全

信息系统运行管理员教程6–信息系统安全第1节信息系统安全概述 1.信息系统安全的概念信息系统安全是指保障计算机及其相关设备、设施（含网络）的安全，运行环境的安全，信息的安全，实现信息系统的正常运行。信息系统…...

编程日记 2026/2/22 21:56:15

实验- 分片上传 VS 直接上传

分片上传和直接上传是两种常见的文件上传方式。分片上传将文件分成多个小块，每次上传一个小块，可以并行处理多个分片，适用于大文件上传，减少了单个请求的大小，能有效避免因网络波动或上传中断导致的失败，并…...

编程日记 2026/3/4 9:17:07

训练数据重复采样，让正负样本比例1：1

详细解释 resample 函数： resample 函数来自 sklearn.utils，用于从数据集中重新抽样。replaceTrue 表示允许重复抽样，即同一个样本可以被多次选中。n_samples 指定抽样的数量。确保训练集数量相同： 通过 resample 函数&#xff…...

编程日记 2026/2/14 11:07:09

生活中的可靠性小案例12：类肤材质老化发粘问题

我一直觉得我买的某品牌车载吸尘器很好用，用了几年，目前性能也是杠杠的。然而它现在有个最大的问题，就是表面发粘了，用起来粘手，非常不舒服。这一类问题在生活中不少见，尤其是一些用了类肤材质涂层的物件。…...

编程日记 2026/2/27 3:06:25

qt 自带虚拟键盘的编译使用记录

一、windows 下编译使用vs 命令窗口，分别执行： qmake CONFIG"lang-en_GB lang-zh_CN" nmake nmake install 如果事先没有指定需要使用的输入法语言就进行过编译，则需要先执行 nmake distclean 清理后执行 qmake 才能生效。 …...

编程日记 2026/3/3 4:46:04

python中print函数的flush如何使用

在 Python 中，print 函数的 flush 参数是一个布尔值，默认值为 False。当设置为 True 时，它会强制将输出缓冲区的内容立即刷新到目标设备（通常是控制台），而不是等待缓冲区满或者程序结束时才输出。要注意fl…...

编程日记 2026/3/7 8:59:23

k8s集群-kubeadm init

为了使用阿里云的镜像源加速 kubeadm init 初始化 Kubernetes 集群的过程，你需要修改 kubeadm 的配置文件以指向阿里云提供的镜像仓库。以下是具体步骤： 1. 创建或编辑 kubeadm 配置文件首先，创建一个 kubeadm 的配置文件（如果还…...

编程日记 2026/2/27 3:05:58

【软考-架构】5.2、传输介质-通信方式-IP地址-子网划分

✨资料&文章更新✨ GitHub地址：https://github.com/tyronczt/system_architect 文章目录传输介质网线光纤无线信道通信方式和交换方式会考：交换方式 💯考试真题第一题第二题 IP地址表示子网划分💯考试真题第一题第二题传输…...

编程日记 2026/3/6 1:37:20

记一次OOM异常问题排查

背景最近，有运维同事收到告警，提示服务器出现CPU占用100%的情况出现，并且严重影响服务性能，甚至导致一些功能不可用。接到上述情况反馈后，随即展开对问题的排查。排查 CPU占用100%排查定位进程：使用 t…...

编程日记 2026/3/7 11:22:59

websocket学习手册及python实现简单的聊天室

概述 WebSocket 是一种网络通信协议，允许在单个 TCP 连接上进行全双工通信。它最核心的优势就在于实现了持久连接，实现了实时的数据传输。HTTP 协议有一个很大的缺点，通信只能由客户端发起，服务器返回响应后连接就会关闭&#xf…...

编程日记 2026/2/20 14:10:57

SpringMVC （二）请求处理

目录章节简介一请求处理（初级） eg:请求头二请求处理（进阶） eg:请求体三获取请求头四获取Cookie 五级联封装六使用RequestBoby封装JSON对象七文件的上传八获取整个请求 HttpEntity 九原生请求 Spring…...

编程日记 2026/2/23 13:05:12

Android (Kotlin) 高版本 DownloadManager 封装工具类，支持 APK 断点续传与自动安装

以下是一个针对 Android 高版本的 DownloadManager 封装工具类，支持断点续传和自动安装 APK 功能。该工具类兼容 Android 10 及以上版本的文件存储策略，并适配了 FileProvider 和未知来源应用安装权限。工具类：DownloadUtils import and…...

编程日记 2026/3/2 14:10:27

深入探索Android Bitmap：从原理到实战

一、Bitmap 是什么在 Android 开发中，Bitmap 是极为重要的基石。简单来说，Bitmap 代表位图，是图片在内存里的具体呈现形式，任何诸如 JPEG、PNG、WEBP 等格式的图片，一旦被加载到内存中，就会以 Bitmap 对象的形式存在。从原理上看，Bitmap 本质是像素点的集合，若其宽度…...

编程日记 2026/2/18 20:57:19

详细介绍 SetWindowPos() 函数

书籍：《Visual C 2017从入门到精通》的2.3.8 Win32控件编程环境：visual studio 2022 内容：【例2.29】模态对话框说明：以下内容大部分来自腾讯元宝。 1. 函数功能与用途 SetWindowPos() 是 Windows API 中用于动态调整窗口…...

编程日记 2026/3/7 10:17:24

1.6、Java继承、构造方法、数组

子类可以增加字段、增加方法或覆盖父类方法，但继承不会删除任何字段和方法不恰当认为super 同 this 引用是类似的概念，其实super不是一个对象的引用，不能将值super赋给另一个对象变量，super只是一个指示编译器调用父类方法的特殊…...

编程日记 2026/2/21 22:10:20

通义万相 2.1 与蓝耘智算平台的深度协同，挖掘 AIGC 无限潜力并释放巨大未来价值

我的个人主页我的专栏： 人工智能领域、java-数据结构、Javase、C语言，希望能帮助到大家！！！ 点赞👍收藏❤ 引言：AIGC 浪潮下的新机遇在当今数字化飞速发展的时代，人工智能生成内容&…...

编程日记 2026/3/1 14:09:26

Spring Boot项目中成功集成了JWT

JWT 原理解释什么是 JWT？ JSON Web Token（JWT）是一种开放标准（RFC 7519），用于在网络应用环境间安全地将信息作为JSON对象传输。JWT通常用于身份验证和信息交换。 JWT 的结构 JWT由三部分组成&#xff…...

编程日记 2026/3/7 11:23:06

DeepSeek 3FS集群化部署临时笔记

DeepSeek 3FS集群化部署临时笔记一、3FS集群化部署1、环境介绍2、对应的软件包安装3、编译4、部署4.1 部署monitor_collector_mainStep 2: Admin clientStep 3: Mgmtd serviceStep 4: Meta serviceStep 5: Storage serviceStep 6: Create admin user, storage targets and cha…...

编程日记 2026/2/27 8:57:29

专题|Python贝叶斯金融数据应用实例合集：随机波动率SV模型、逻辑回归、参数更新、绩效比较BEST分析亚马逊股票、普尔指数...

原文链接：https://tecdat.cn/?p41020 本专题合集系统梳理了贝叶斯方法在金融数据分析与分类建模中的前沿应用。合集聚焦于PyMC3概率编程框架，深度探讨了共轭先验参数更新、贝叶斯逻辑回归、贝叶斯夏普比率等核心算法在实际场景中的落地实践（…...

编程日记 2026/3/5 10:56:50

RocketMQ企业应用篇

在现代企业级应用中，分布式消息队列系统如RocketMQ发挥着至关重要的作用。本文将深入探讨RocketMQ在电商和物联网场景中的应用，结合实际案例和代码示例，展示如何利用RocketMQ解决企业级应用中的关键问题。一、电商场景应用 1. 秒杀抢购解决…...

编程日记 2026/2/16 20:25:16

vue-常用指令 | 常用指令的修饰符

目录什么是vue指令 v-cloak v-text v-html v-pre v-show /v-if v-else/v-else-if v-on v-bind v-for v-model 常用指令的修饰符 v-model 指令修饰符事件修饰符按键修饰符什么是vue指令指令就是带有 v- 前缀的特殊属性，不同的属性对应不…...

编程日记 2026/2/19 11:40:31