使用 HTML 和 CSS 实现绚丽的节日烟花效果
文章目录
- 1. 效果预览
- 2. 核心技术栈
- 3. 核心代码解读
- 3.1 HTML结构
- 3.2 霓虹文字的CSS样式
- 3.2.1 核心样式代码
- 3.2.2 动画效果
- 3.3 JavaScript 的烟花效果实现
- 3.3.1 烟花上升
- 3.3.2 粒子爆炸
- 4. 用户交互
- 5. 运行步骤
- 总结
1. 效果预览
-
打开后输入文本的展示内容
-
用户点击页面后播放背景音乐,并隐藏提示
-
绚丽的动态烟花效果,支持多种烟花形状:心型、螺旋形、圆形、六芒星型、星型、花朵型
-
炫酷的霓虹文字效果,动态颜色渐变与光晕呼吸动画
-
点击任意位置触发烟花爆炸,粒子颜色与样式随机
2. 核心技术栈
- HTML5:搭建页面结构,定义容器和音频。
- CSS3:实现动画效果(烟花、霓虹文字等)。
- JavaScript:控制用户交互、生成烟花、随机效果等逻辑。
3. 核心代码解读
3.1 HTML结构
-
HTML 部分主要包含以下元素:
- 一个动态文字容器,顶部显示“节日快乐”字样。
- 一个用于展示烟花效果的容器。
- 一个隐藏的背景音乐播放器。
- 一个提示用户点击的文字提示
-
代码:
<div class="dynamic-text" id="dynamicText">XXX,节日快乐!</div>
<div class="firework-container" id="firework-container"></div>
<div id="musicPrompt">点击页面任意位置播放音乐并观看烟花</div>
<audio id="backgroundMusic" loop><source src="xue.mp3" type="audio/mpeg">您的浏览器不支持音频播放。
</audio>
3.2 霓虹文字的CSS样式
文字部分的样式通过 CSS 动画 增强,包括颜色渐变流动、呼吸光晕效果以及动态文字的模糊效果
3.2.1 核心样式代码
- 代码:
.dynamic-text {position: absolute;top: 20px;left: 50%;transform: translateX(-50%);font-size: 48px;font-weight: bold;color: #fff;text-align: center;background: linear-gradient(90deg, #ff00ff, #ff8800, #ff00ff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;animation: gradient-flow 5s infinite linear, glow-pulse 2s infinite ease-in-out;text-shadow: 0 0 5px #ff00ff,0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 40px #ff8800,0 0 80px #ff8800;letter-spacing: 5px;
}
3.2.2 动画效果
- 渐变流动效果:通过
@keyframes gradient-flow
,让文字的颜色渐变动态流动 - 代码:
@keyframes gradient-flow {0% {background-position: 0% 50%;}100% {background-position: 100% 50%;}
}
- 光晕呼吸动画:通过
@keyframes glow-pulse
,实现文字的光晕强弱交替变化 - 代码:
@keyframes glow-pulse {0%, 100% {text-shadow: 0 0 5px #ff00ff,0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 40px #ff8800,0 0 80px #ff8800;}50% {text-shadow: 0 0 10px #ff00ff,0 0 20px #ff00ff,0 0 40px #ff00ff,0 0 60px #ff8800,0 0 100px #ff8800;}
}
3.3 JavaScript 的烟花效果实现
烟花效果是项目的核心部分,它通过 JavaScript 动态生成粒子,并为每个粒子赋予不同的运动轨迹
3.3.1 烟花上升
- 每个烟花爆炸之前,会有一个火箭从页面底部升起
- 火箭动画通过 CSS 的
@keyframes move-up
实现 - 代码:
@keyframes move-up {0% {transform: translateY(0);}100% {transform: translateY(-50vh);}
}
- 使用
createFirework()
函数,动态生成火箭,并将其添加到 DOM 中 - 代码:
function createFirework(x = Math.random() * window.innerWidth, y = window.innerHeight * 0.5) {const rocket = document.createElement("div");rocket.classList.add("rocket");rocket.style.left = `${x}px`; // 设置火箭水平位置rocket.style.bottom = "0px"; // 从页面底部发射container.appendChild(rocket);// 火箭到达中间后爆炸rocket.addEventListener("animationend", () => {rocket.remove(); // 移除火箭explodeFirework(x, y); // 绽放烟花});
}
3.3.2 粒子爆炸
- 每个烟花到达目标高度后,触发爆炸生成粒子
- 粒子的动画由
@keyframes explode
实现,随机生成粒子的位置和颜色 - 代码:
@keyframes explode {0% {opacity: 1;transform: translate(0, 0) scale(1);}100% {opacity: 0;transform: translate(var(--dx), var(--dy)) scale(0.5);}
}
explodeFirework()
函数生成不同形状的烟花。支持多种形状,包括圆形、心型、星型、螺旋形、六芒星、花朵形等。- 代码:
function explodeFirework(x, y) {const types = ["circle", "heart", "star", "spiral", "six-pointed", "flower"];const type = types[Math.floor(Math.random() * types.length)];const particleCount = 150;for (let i = 0; i < particleCount; i++) {const particle = document.createElement("div");particle.classList.add("particle");let dx, dy;if (type === "circle") {const angle = (i / particleCount) * Math.PI * 2;dx = Math.cos(angle) * 200;dy = Math.sin(angle) * 200;} else if (type === "heart") {const angle = (i / particleCount) * Math.PI * 2;dx = 16 * Math.pow(Math.sin(angle), 3) * 10;dy = -(13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle)) * 10;} else if (type === "star") {const angle = (i % 5) * (Math.PI * 2) / 5;const distance = i % 2 === 0 ? 150 : 80;dx = Math.cos(angle) * distance;dy = Math.sin(angle) * distance;}
4. 用户交互
- 用户可以点击页面任意位置触发烟花,并播放背景音乐
- 代码:
// 用户点击播放音乐并隐藏提示
function playMusic() {backgroundMusic.play().catch((err) => {console.error("音乐播放失败:", err);});musicPrompt.style.display = "none"; // 隐藏提示
}window.addEventListener("click", playMusic);
5. 运行步骤
-
下载源码压缩包 —— 烟花实现
-
解压文件
-
双击烟花.html 即可通过浏览器打开
-
在弹出对话框中输入你要显示的文本
-
点击屏幕任意位置,播放背景音乐这里默认歌曲是《봄눈》(春雪)
总结
- 如有疑问,或遇到问题,请私信我或在评论区留言
- 如果觉得还不错请给留下您宝贵的点赞收藏,感谢!
相关文章:
使用 HTML 和 CSS 实现绚丽的节日烟花效果
文章目录 1. 效果预览2. 核心技术栈3. 核心代码解读3.1 HTML结构3.2 霓虹文字的CSS样式3.2.1 核心样式代码3.2.2 动画效果 3.3 JavaScript 的烟花效果实现3.3.1 烟花上升3.3.2 粒子爆炸 4. 用户交互5. 运行步骤总结 1. 效果预览 打开后输入文本的展示内容 用户点击页面后播放…...
Java - 日志体系_Apache Commons Logging(JCL)日志接口库_适配Log4j2 及 源码分析
文章目录 PreApache CommonsApache Commons ProperLogging (Apache Commons Logging ) JCL 集成Log4j2添加 Maven 依赖配置 Log4j2验证集成 源码分析1. Log4j-jcl 的背景2. log4j-jcl 的工作原理2.1 替换默认的 LogFactoryImpl2.2 LogFactoryImpl 的实现…...
【Halcon】例程讲解:基于形状匹配与OCR的多图像处理(附图像、程序下载链接)
1. 开发需求 在参考图像中定义感兴趣区域(ROI),用于形状匹配和文本识别。通过形状匹配找到图像中的目标对象位置。对齐多幅输入图像,使其与参考图像保持一致。在对齐后的图像上进行OCR识别,提取文本和数字信息。以循环…...
FreePBX修改IP地址和端口以及添加SSL证书开启HTTPS访问
最近给单位部署了freepbx网络电话系统,我的系统是安装在ibm x3650 m4物理机上的,iso镜像下载后直接用Rufus烧录到U盘,服务器上先做好了raid1,插上U盘重启服务器开撸。安装过程略过了,在虚拟机上安装就不用那么麻烦。 …...
简易共享屏幕工具改进版
昨天心血来潮写了一篇关于简易共享屏幕工具的文章,发现也有一些阅读量,并且我对于它的效果不是很满意 ,实际呈现的帧率还是太低了。所以我今天换了更高效的方式来实现。 50 行代码简易屏幕共享工具 改进 降低分辨率 昨天那个测试的帧率低&a…...
【WSL】Ubuntu 24.04 安装配置docker
继上一篇文章:【WSL】Ubuntu 22.04 安装配置docker 这次我在新搭建的台式机安装的WSL上,也安装一个docker,因为最近要开发TTS相关的东西。 参考 清华大学镜像站的这篇文章基本涵盖了所有的操作步骤,照着做就行了:Do…...
bash 中 ${-#*i} 是什么意思?
-------------------------------------------------- author: hjjdebug date: 2024年 12月 25日 星期三 17:43:45 CST description: bash 中 ${-#*i} 是什么意思? -------------------------------------------------- 在centos 的 /etc/profile 中有这样的语句 for i in /…...
C++ OCR 文字识别
一.引言 文字识别,也称为光学字符识别(Optical Character Recognition, OCR),是一种将不同形式的文档(如扫描的纸质文档、PDF文件或数字相机拍摄的图片)中的文字转换成可编辑和可搜索的数据的技术。随着技…...
Qt 中实现系统主题感知
【写在前面】 在现代桌面应用程序开发中,系统主题感知是一项重要的功能,它使得应用程序能够根据用户的系统主题设置(如深色模式或浅色模式)自动调整其外观。 Qt 作为一个跨平台的C图形用户界面应用程序开发框架,提供…...
PyTorch transpose、permute、view和einops.rearrange
einops.rearrange 和 PyTorch 中的 transpose、permute 以及 view 都用于张量的操作,但它们的功能侧重和用法各有不同。以下是它们的详细比较和区别: 1. 功能和用途对比 功能/操作einops.rearrangetorch.transposetorch.permutetorch.view维度交换支持直接通过模式字符串交换…...
爬虫数据存储:Redis、MySQL 与 MongoDB 的对比与实践
爬虫的核心任务是从网络中提取数据,而存储这些数据是流程中不可或缺的一环。根据业务需求的不同,存储的选择可能直接影响数据处理的效率和开发体验。本文将介绍三种常用的存储工具——Redis、MySQL 和 MongoDB,分析它们的特点,并提…...
05、MyBatis
一、简介 MyBatis它是一款优秀的持久层框架,它支持自定义SQL、存储过程及高级映射。不像Hibernate等一些全自动框架,对于关键的SQL部分可以交由程序自己编写而不是自动生成,从而提高了灵活性。 二、基础使用示例 基础依赖 <dependency><groupId>org.springf…...
EMNLP'24 最佳论文解读 | 大语言模型的预训练数据检测:基于散度的校准方法
点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入! 点击 阅读原文 观看作者讲解回放! 作者简介 张伟超,中国科学院计算所网络数据科学与技术重点实验室三年级直博生 内容简介 近年来,大语言模型(LLMs)的…...
Linux 的信号机制
目录 一、信号机制概述 二、常见信号类型及含义 三、信号的产生方式 1.用户操作产生信号 2.系统调用产生信号 3.硬件异常产生信号 四、信号的处理方式 1.默认处理 2.忽略信号 3.自定义处理函数 五、信号处理流程深入剖析 六、信号机制的应用场景与优势 七、总结 一、…...
国内独立开发者案例及免费送独立开发蓝图书
独立开发者在国内越来越受到关注,他们追求的是一种自由且自给自足的工作状态。 送这个: 少楠light(Flomo、小报童、如果相机):他们是独立开发者的典范,不仅开发了多款产品,还坚信“剩者为王”…...
以太网(Ethernet)和无线局域网(Wireless Local Area Network, WLAN)
当然,下面我将详细介绍以太网(Ethernet)和无线局域网(Wireless Local Area Network, WLAN),包括它们的定义、技术标准、优缺点以及应用场景等方面。 一、以太网(Ethernet) 1. 定义…...
大模型-ChatGLM2-6B模型部署与微调记录
大模型-ChatGLM2-6B模型部署与微调记录 模型权重下载: 登录魔塔社区:https://modelscope.cn/models/ZhipuAI/chatglm2-6b 拷贝以下代码执行后,便可快速权重下载到本地 # 备注:最新模型版本要求modelscope > 1.9.0 # pip insta…...
Web防火墙和下一代防火墙的区别
介绍 客户经常询问“当我已经拥有下一代防火墙(NGFW)时,为什么需要Web应用程序防火墙(WAF)?”。本博文的目的是解释两种解决方案之间的区别,重点关注Web应用程序防火墙可以提供的附加值。 什么…...
Yocto 项目中的交叉编译:原理与实例
Yocto 项目是一个强大的工具集,它专注于为嵌入式系统生成定制的 Linux 发行版。交叉编译在 Yocto 项目中扮演着核心角色,它使得开发者能够在功能强大的宿主机上构建适用于资源受限目标设备的软件系统。这篇文章将从运行原理、实际案例和工具链组成等角度…...
从安全角度看 SEH 和 VEH
从安全角度看 SEH 和 VEH 异常处理程序是处理程序中不可预见的错误的基本方法之一 https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/exceptions/ SEH——结构化异常处理程序 就其工作方式而言,异常处理程序与其他处理程序相比相当基础࿰…...
【多维DP】力扣3366. 最小数组和
给你一个整数数组 nums 和三个整数 k、op1 和 op2。 你可以对 nums 执行以下操作: 操作 1:选择一个下标 i,将 nums[i] 除以 2,并 向上取整 到最接近的整数。你最多可以执行此操作 op1 次,并且每个下标最多只能执行一…...
钉钉h5微应用,鉴权提示dd.config错误说明,提示“jsapi ticket读取失败
这个提示大多是因为钉钉服务器没有成功读取到该企业的jsticket数据 1. 可能是你的企业corpid不对 登录钉钉管理后台 就可以找到对应企业的corpid 请严格使用这个corpid 。调用获取jsapi_ticket接口,使用的access_token对应的corpid和dd.config中传递的corpid不一致…...
Linux系统之tree命令的基本使用
Linux系统之tree命令的基本使用 一、tree命令介绍二、tree工具安装三、tree命令帮助3.1 查询帮助信息3.2 tree命令帮助解释 四、tree命令的基本使用4.1 直接使用4.2 *限制显示的层级4.3 仅显示目录4.4 不显示隐藏文件4.5 显示文件大小4.6 彩色输出4.7 输出到文件4.8 输出不同格…...
PyTorch框架——基于深度学习LYT-Net神经网络AI低光图像增强系统源码
第一步:LYT-Net介绍 本文介绍了LYT-Net,即轻量级YUV Transformer 网络,作为一种新的低光图像增强方法。所提出的架构与传统的基于Retinex的模型不同,它利用YUV颜色空间对亮度(Y)和色度(U和V&…...
【AI学习】DeepSeek-V3 技术报告学习:总体架构
翻了一下DeepSeek-V3 技术报告学习,太长,只是大概翻了一下,其中Multi-Token Prediction的技术就很亮眼。 摘要 本文介绍了DeepSeek-V3,这是一个拥有671B总参数的强大混合专家(MoE)语言模型,每…...
PyTorch快速入门
文章目录 前言简介软件包导入创建张量类型操作索引直接索引切片索引 维度变换增加维度删除维度维度重复维度交换broadcast合并张量拆分张量运算最后 前言 你好,我是醉墨居士,今天分享一下PyTorch的基本使用的快速入门教程,希望能够帮助各位快…...
GCP Cloud Observability 是什么,有什么使用场景
GCP Cloud Observability 是 Google Cloud Platform (GCP) 提供的一组工具和服务,用于监控、日志记录、追踪和调试应用程序和基础设施的健康和性能。通过收集和分析遥测数据(如指标、日志和追踪信息),Cloud Observability 有助于理…...
OpenCV相机标定与3D重建(35)计算两幅图像之间本质矩阵(Essential Matrix)的函数findEssentialMat()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 从两幅图像中的对应点计算本质矩阵。 cv::findEssentialMat 是 OpenCV 库中用于计算两幅图像之间本质矩阵(Essential Matrix…...
计算机毕业设计Hadoop+Spark美团美食推荐系统 美团餐厅推荐系统 美团推荐系统 美食价格预测 美团爬虫 美食数据分析 美食可视化大屏
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
【探花交友】SpringCache
目录 通用缓存SpringCache 重要概念 导入依赖 开启缓存支持 编写UserInfoService 缓存Cacheable 发布视频清空缓存 通用缓存SpringCache 实现缓存逻辑有2种方式: 每个接口单独控制缓存逻辑 统一控制缓存逻辑Spring从3.1开始定义了org.springframework.cac…...
链表 之 无头结点【哨兵位】单向非循环链表【单链表】增删改查 等方法
系列文章目录 🎈 🎈 我的CSDN主页:OTWOL的主页,欢迎!!!👋🏼👋🏼 🎉🎉我的C语言初阶合集:C语言初阶合集,希望能…...
2001年对墨西哥湾流进行的主动荧光测量数据
目录 简介 摘要 代码 引用 网址推荐 知识星球 机器学习 干旱监测平台 Active fluorescence measurements in the Gulf Stream in 2001 简介 "Active fluorescence measurements in the Gulf Stream in 2001"是指在2001年对墨西哥湾流进行的主动荧光测量。这…...
AtCoder Beginner Contest 386
1.D - Diagonal Separation 赛时一直卡在这道题,知道思路但不知道怎么解决,就是说若存在给定的白色方块出现在某个B方块与源点构成的区域内就无法实现,如果数据是1000则可以通过离散化 二维差分来解决,赛时一直在试图通过树状数组,线段树来解决&#x…...
Ajax总结
引言 这是属于前端的部分了,先是学习了三件套(HTML,JS,CSS没怎么学,但是大概能理解)之后就开始学习这个了,学习之前应该要知道她是做什么的,但是我没有做这一步,之后会先了解为什么要学习这门技…...
Springboot使用外置的Servlet容器
嵌入式Servlet容器:应用打成可执行的jar 优点:简单、便携 缺点:默认不支持JSP、优化定制比较复杂 外置的Servlet容器:外面安装Tomcat---应用war包的方式打包 一.嵌入式tomcat启动项目步骤: 1.创建一个普通maven项目…...
金仓数据库物理备份和还原
差异备份:是复制上次全备份以来所有变更数据的一种备份。 增量备份:没有重复的备份数据,备份的数据量不大,备份所需的时间很短,备份速度快 考点 sys_rman工具(必考) 配置 sys_backup.conf 初…...
Python提取字符串中的json,时间,特定字符
1.整个字符串为json s{"time":"2014-10-14 12:00", "tid":12, "info_message":"我爱python"} _jsonjson.loads(s) print(_json) 执行结果: {time: 2014-10-14 12:00, tid: 12, info_message: 我爱python} 2…...
Android `android.graphics.drawable` 包深度解析:架构与设计模式
Android android.graphics.drawable 包深度解析:架构与设计模式 目录 引言Drawable 概述Drawable 的架构 Drawable 类层次结构Drawable 的核心方法Drawable 的设计模式 装饰者模式工厂模式状态模式常用 Drawable 子类解析 BitmapDrawableShapeDrawableLayerDrawableStateList…...
从提示词到共振:李继刚的AI沟通法则
摘要:在极客公园的演讲中,李继刚分享了他对提示词的深入研究,提出了通过场域和共振达到与AI深层次交流的策略。他分析了AI的存在属性,指出未来提示词将因AI进化而变得更为简洁和高效。 一、Prompt思考与总结 本文内容大多是源于…...
Redis字符串底层结构对数值型的支持常用数据结构和使用场景
字符串底层结构 SDS (Simple Dynamic Strings) 是 Redis 中用于实现字符串类型的一种数据结构。SDS 的设计目标是提供高效、灵活的字符串操作,同时避免传统 C 字符串的一些缺点。 struct sdshdr {int len; // 已使用的长度int free; // 未使用的长度char bu…...
Windows下Python+PyCharm的安装步骤及PyCharm的使用
Windows下PythonPyCharm的安装步骤及PyCharm的使用 文章目录 Windows下PythonPyCharm的安装步骤及PyCharm的使用一、Python的安装(1)环境准备(2)Python安装(3)pip组件的安装 二、PyCharm的安装(…...
oracle基础:中文字段排序详解
在数据库操作中,中文字段排序是一个常见但又容易被忽视的问题。默认情况下,Oracle 数据库的排序规则是基于 Unicode 编码的,这可能导致排序结果并不符合预期,比如按拼音、部首或笔画排序。本文将详细解析如何在 Oracle 中实现中文…...
网络安全专有名词详解_3
80.WAF 即为Web Application Firewall,即Web应用防火墙,通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提供保护的一款产品。 81.SOC Security Operations Center,翻译为安全运行中心,通过建立一套实时的资产风险模型&a…...
【C语言】库函数常见的陷阱与缺陷(三):内存分配函数[2]--calloc
C语言中的calloc函数是一个用于分配多个具有相同大小的内存块的函数,它在动态内存管理中扮演着重要角色。然而,在使用calloc时也存在一些陷阱与缺陷。 一、功能与常见用法 calloc(contiguous allocation)函数用于动态分配内存,相较于 malloc 函数,不仅能够在堆上为程序…...
CKA认证 | Day7 K8s存储
第七章 Kubernetes存储 1、数据卷与数据持久卷 为什么需要数据卷? 容器中的文件在磁盘上是临时存放的,这给容器中运行比较重要的应用程序带来一些问题。 问题1:当容器升级或者崩溃时,kubelet会重建容器,容器内文件会…...
.net core 的数据库编程
Python基础 Python是一种高级编程语言,由Guido van Rossum于1980年代后期发明,并于1991年首次发布。它以简洁的语法和易于阅读的代码风格著称,因而成为程序员和数据科学家等领域的热门选择。在这篇文章中,我们将深入探讨Python的…...
再生核希尔伯特空间(RKHS)上的分位回归
1. 基本定义和理论基础 1.1 再生核希尔伯特空间(RKHS) 给定一个非空集合 X \mathcal{X} X,一个希尔伯特空间 H \mathcal{H} H 称为再生核希尔伯特空间,如果存在一个函数 K : X X → R K: \mathcal{X} \times \mathcal{X} \rightarrow \mathbb{R} K…...
结构方程模型【SEM】:非线性、非正态、交互作用及分类变量分析
利用结构方程模型建模往往遇到很多‘特殊’情况:1)变量间为非直线关系;2)变量间存在交互作用;3)数据不满足正态分布;4)变量为非正态类型的数值变量,如0,1数据…...
不安全物联网的轻量级加密:综述
Abstract 本文综述了针对物联网(IoT)的轻量级加密解决方案。这项综述全面覆盖了从轻量级加密方案到不同类型分组密码的比较等多个方面。同时,还对硬件与软件解决方案之间的比较进行了讨论,并分析了当前最受信赖且研究最深入的分组…...
DeepSpeed 使用 LoRA 训练后文件结构详解
DeepSpeed 使用 LoRA 训练后文件结构详解 在大语言模型(LLM)的训练过程中,DeepSpeed 提供了强大的分布式训练能力,而 LoRA(Low-Rank Adaptation)通过参数高效微调技术显著减少了资源占用。完成训练后&…...