一个酷炫的烟花网站

最新推荐文章于 2025-12-01 21:03:28 发布
原创 最新推荐文章于 2025-12-01 21:03:28 发布 · 327 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

效果如图：

示意图

代码为：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩烟花 - 形状绽放</title>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
     
     
            background: #000;
            overflow: hidden;
            cursor: crosshair;
            font-family: 'Arial', sans-serif;
            position: relative;
        }

        /* 流光溢彩背景 */
        .aurora-bg {
     
     
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg,
            #0a0a0a 0%,
            #1a0033 25%,
            #000d33 50%,
            #001a1a 75%,
            #0a0a0a 100%);
            background-size: 400% 400%;
            animation: aurora 15s ease infinite;
            opacity: 0.3;
        }

        @keyframes aurora {
     
     
            0% {
     
     
                background-position: 0% 50%;
            }
            50% {
     
     
                background-position: 100% 50%;
            }
            100% {
     
     
                background-position: 0% 50%;
            }
        }

        /* 动态光束 */
        .light-beam {
     
     
            position: fixed;
            width: 2px;
            height: 100%;
            background: linear-gradient(to bottom,
            transparent,
            rgba(138, 43, 226, 0.3),
            transparent);
            animation: moveBeam 8s linear infinite;
            filter: blur(2px);
        }

        @keyframes moveBeam {
     
     
            0% {
     
     
                transform: translateX(-100vw) rotate(45deg);
            }
            100% {
     
     
                transform: translateX(100vw) rotate(45deg);
            }
        }

        canvas {
     
     
            position: relative;
            z-index: 1;
        }

        /* 标题 */
        .title {
     
     
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: #fff;
            font-size: 2.5em;
            font-weight: bold;
            text-shadow: 0 0 20px rgba(138, 43, 226, 0.8),
            0 0 40px rgba(138, 43, 226, 0.5);
            z-index: 10;
            letter-spacing: 3px;
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientText 3s ease infinite;
        }

        @keyframes gradientText {
     
     
            0% {
     
     
                background-position: 0% 50%;
            }
            50% {
     
     
                background-position: 100% 50%;
            }
            100% {
     
     
                background-position: 0% 50%;
            }
        }

        /* 形状选择面板 */
        .shape-panel {
     
     
            position: fixed;
            bottom: 30px;
            left: 30px;
            display: flex;
            gap: 15px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .shape-btn {
     
     
            width: 60px;
            height: 60px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #fff;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .shape-btn::before {
     
     
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
        }

        .shape-btn:hover::before {
     
     
            width: 100%;
            height: 100%;
        }

        .shape-btn:hover {
     
     
            transform: translateY(-5px);
            border-color: rgba(255, 255, 255, 0.6);
            box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
        }

        .shape-btn.active {
     
     
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-color: #fff;
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(102, 126, 234, 0.6);
        }

        /* 尺寸控制滑块 */
        .size-control {
     
     
            position: fixed;
            bottom: 120px;
            left: 30px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px 20px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .size-label {
     
     
            color: #fff;
            font-size: 14px;
            min-width: 60px;
        }

        .size-slider {
     
     
            width: 150px;
            height: 6px;
            -webkit-appearance: none;
            appearance: none;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            outline: none;
            transition: background 0.3s;
        }

        .size-slider:hover {
     
     
            background: rgba(255, 255, 255, 0.3);
        }

        .size-slider::-webkit-slider-thumb {
     
     
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
            transition: all 0.3s;
        }

        .size-slider::-webkit-slider-thumb:hover {
     
     
            transform: scale(1.2);
            box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
        }

        .size-value {
     
     
            color: #fff;
            font-size: 14px;
            min-width: 30px;
            text-align: right;
        }

        /* 颜色选择条 */
        .color-panel {
     
     
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 10;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .color-title {
     
     
            color: #fff;
            font-size: 12px;
            margin-bottom: 10px;
            text-align: center;
            opacity: 0.8;
        }

        .color-strip {
     
     
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            max-width: 200px;
        }

        .color-option {
     
     
            width: 35px;
            height: 35px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .color-option::after {
     
     
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
            border-radius: 50%;
        }

        .color-option:hover::after {
     
     
            width: 100%;
            height: 100%;
        }

        .color-option:hover {
     
     
            transform: scale(1.1);
            box-shadow: 0 0 15px currentColor;
        }

        .color-option.active
最低0.47元/天 解锁文章
【HTML——酷炫烟花】（效果+代码）| 过年烟花特效 | 烟火特效 | 夜空烟花特效 | 绝美烟花特效 | 附代码
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
10-02 3260
分享一个【HTML——酷炫烟花】的效果，希望大家喜欢！【HTML——酷炫烟花】（效果+代码）| 过年烟花特效 | 烟火特效 | 夜空烟花特效 | 绝美烟花特效 | 附代码
新年跨年烟花超酷炫合集【内含十八个烟花酷炫效果源码】
白大锅的博客，毕设WangLoveBai_999
12-19 1150
内含十八个超酷炫烟花特效等你来拿
2023跨年烟花3D最炫烟花，html最酷炫动态烟花源码分享，点击即可直接运行
热门推荐
在下马农的碎碎念
12-25 4万+
2023年跨年烟花代码 2023圣诞烟花最炫烟花代码 2023春节烟花代码 2023跨年烟花秀,超好看的跨年烟花秀代码，二十行代码，三分钟就能完成部署。 跨年烟花代码html 2023年跨年烟花代码 跨年烟花代码python 跨年烟花代码c语言 2023跨年烟花代码python 跨年烟花代码c 用c++2010跨年烟花代码 java跨年烟花代码 跨年烟花代码c++ 跨年烟花代码送给朋友 跨年烟花秀送给2023努力的自己
【酷炫烟花特效表白（Html5+CSS3+JS，带背景音乐哦！）】效果 + 代码
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
07-18 6784
快速阅读目录效果演示代码片段源码获取 效果演示 （同时也会有歌曲播放的哦！背景等都可以根据自己个人意愿来更改~） 这是第一种选择的部分效果展示： 这是第二种选择的部分效果展示： 代码片段 烟花.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
【JavaScript + canvas画布】实现酷炫的烟花绽放效果
m0_45292669的博客
09-19 701
免费分享【JavaScript+canvas画布】实现一场绚烂的烟花盛放，全屏彩色烟花动画效果，春节节日烟花代码分享
html5 canvas 烟花,html5 canvas酷炫的烟花爆炸动画特效
weixin_34418334的博客
06-03 938
特效描述：html5canvas 酷炫的 烟花爆炸动画特效。html5点击页面烟花爆炸动画，3D烟花动画，酷炫的烟花特效。代码结构1. 引入JS2. HTML代码点击页面(function() {var Particles,bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };Particl...
酷炫❤表白❤烟花
04-17 2318
酷炫????表白????烟花???? 作品简介 该作品是运用到了前端开发的知识内容(JS内容），但是运用到了前段比较后面的知识了，该作品可以用做网页设计的背景是一个不错的选择，以上是该程序运行的效果图，HTML，CSS中多部分的运用与设置，就是单词的字面意思，JS的话可以不做太多的深入了解，有时只需会调用即可，看的懂即可， 类似这样的的表白相册比如：雪花下的????告白???? 调用JS使用时，JS里面的内容不需要做过多的研究与了解，只需给你一个JS文件会调用即可，但是HTML，CSS的内容中的至少的
Vue2 实现酷炫旋转烟花特效：从零构建动态烟花页面，新手必备教程 Vue2 极光渐变背景+烟花动画效果教程：实现全屏绚丽特效 如何用 Vue2 创建绚丽的烟花动画网页：极光背景+旋转烟花完整代码 V
南北极之间
11-09 1057
Vue2 实现酷炫旋转烟花特效：从零构建动态烟花页面，新手必备教程 Vue2 极光渐变背景+烟花动画效果教程：实现全屏绚丽特效 如何用 Vue2 创建绚丽的烟花动画网页：极光背景+旋转烟花完整代码 V
一波Flutter酷炫特效来袭，持续更新
2401_84912152的博客
05-16 1086
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
HTML5 Canvas酷炫烟花庆祝动画特效
06-11
HTML5 Canvas是现代网页开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，提供了丰富的API来创建复杂的交互式视觉效果。本项目利用HTML5 Canvas技术制作了一款酷炫的彩色烟花庆祝动画特效，适合用于...
HTML——酷炫烟花（追光者）.zip
10-02
在本示例中，"HTML——酷炫烟花（追光者）.zip" 是一个包含了一个酷炫烟花效果的压缩包，它展示了HTML在视觉表现上的潜力。这个效果可能是通过结合HTML、CSS和JavaScript实现的，三者是构建交互式网页的三大核心技术...
酷炫表白烟花(也含有背景音乐).zip
07-18
这个压缩包中，你可以找到一个名为"fire-love-master"的项目文件夹以及一个同名的"酷炫表白烟花"文件，这可能是一个HTML文件，用于展示烟花特效。 在描述中提到的2021.7.18的博客文章中，作者详细介绍了如何利用...
HTML前端酷炫烟花表白代码源文件-（优快云@追光者♂）-20230904
09-04
这是近期通过前端技术实现的一个酷炫烟花表白特效的源文件，已经在博客中记录，近期将会发布。这个资源包含完整的源文件，欢迎有需要的朋友下载！另外，主页专栏“Python从入门到人工智能”持续更新AI干货知识中，也...
HTML5 Canvas酷炫烟花庆祝动画特效.zip
09-26
这个“HTML5 Canvas酷炫烟花庆祝动画特效.zip”压缩包包含了一个使用HTML5 Canvas元素创建的烟花动画特效，它能为网站增添节日氛围或者用于各种庆祝场合。 首先，我们来详细了解一下HTML5 Canvas。Canvas是HTML5的...
Tailwind CSS 实战
pan303507479的博客
12-01 657
Tailwind CSS 实战
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 272
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
脚本网页 推理游戏
最新发布
2401_82519096的博客
12-01 569
单页面即玩。
html css js网页制作成品——鹿晗html+css+js 4页附源码
卡拉米
12-01 456
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
日历生成逻辑
wusandaofwy的博客
12-01 240
比如 获得2025年11月最后一天（也就是11月有几天）比如 获得2025年10月最后一天（也就是10月有几天）
HTML5 Canvas实现酷炫烟花动画庆祝特效
<title>HTML5 Canvas酷炫烟花庆祝动画特效 <canvas id="fireworks" width="800" height="600"></canvas> <script src="js/script.js"></script> ``` #### css/style.css ```css body, html { margin: 0;...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值