HTML 全屏烟花网页

HTML 新年祝福贺卡代码解析

以下提供两套不同风格的新年祝福贺卡HTML代码，分别实现全屏烟花动画效果和简洁卡片式设计，均支持移动端适配。

全屏烟花动画版部分代码

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>2026新春快乐 - 全屏烟花</title>
<style>

  color:#ff0;font-size:40px;text-shadow:0 0 10px #f00;
  text-align:center;
}
</style>
</head>
<body>
<div class="txt">2026<br>新春快乐<br>万事如意</div>
<script>
function rand(min,max){return Math.random()*(max-min)+min}
setInterval(()=>{
  let f=document.createElement('div')
  f.className='fire'
  f.style.left=rand(0,window.innerWidth)+'px'
  f.style.top='0px'

部分代码简洁卡片设计版

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>新年贺卡</title>
<style>
body{background:#1a1a1a;text-align:center;padding-top:60px}
.box{
  background:#222;color:#ffd700;
  max-width:320px;margin:0 auto;padding:30px;
  border-radius:16px;box-shadow:0 0 20px #f00
}
h1{color:red}
p{font-size:18px;line-height:1.8}
</style>
</head>
<body>
<div class="box">
  <h1>2026 马年大吉</h1>
  <p>春回大地万象新</p>
  <p>福满人间喜事临</p>
  <p>身体健康平安顺</p>
  <p>财源滚滚进家门</p>
</div>
</body>
</html>

技术要点说明

全屏烟花版特性

使用绝对定位创建粒子动画效果
通过JavaScript动态生成烟花元素
随机颜色选择器实现多彩效果
100vh全屏高度适配不同设备

卡片设计版特性

响应式布局适配移动端
黄金比例配色方案
圆角边框和阴影增强立体感
最大宽度限制保证大屏显示效果

自定义修改建议

文字内容可直接修改div内的文本
颜色方案通过CSS的color属性调整
动画速度可通过修改setInterval的时间参数控制
卡片尺寸通过调整max-width和padding值改变

两套代码均无需外部依赖，复制即可运行，适合快速部署新年祝福页面。

有问题可留言，✅ 获取方式：

点个关注

关键词：HTML 全屏烟花网页

进入我主页「资源」

免费下载，直接运行

持续分享Python/网页/小程序/电脑实用工具，

不套路、不加密，关注不迷路！