• 首页
  • 社区
  • 导读
  • 圈子
  • 家园
  • 榜单
  • 帮助
    • 立即注册

    HTML+CSS实现2026年春节倒计时！！附源码！！

    12 0
    3 天前 发表在 建站资源| 查看全部 阅读模式

    马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    源码如下：
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>2026年春节倒计时 | 春节倒计时网站</title>
    7.     <meta name="description" content="2026年春节倒计时网站，实时显示距离2026年2月17日春节的时间，支持多种主题切换，包含福字烟花效果。">
    8.     <meta name="keywords" content="2026春节,春节倒计时,春节,倒计时,2026年,福字烟花,春节主题,2月17日">
    9.     <meta name="author" content="laddzhao">
    10.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    11.     <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    12.     <style>
    13.         :root {
    14.             --primary-color: #d32f2f;
    15.             --secondary-color: #ff9800;
    16.             --background-color: #fef5f5;
    17.             --text-color: #333;
    18.             --accent-color: #ffeb3b;
    19.             --panel-color: #fff;
    20.             --shadow-color: rgba(0, 0, 0, 0.1);
    21.             --font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
    22.         }

    24.         * {
    25.             margin: 0;
    26.             padding: 0;
    27.             box-sizing: border-box;
    28.         }

    30.         body {
    31.             font-family: var(--font-family);
    32.             background-color: var(--background-color);
    33.             color: var(--text-color);
    34.             min-height: 100vh;
    35.             overflow-x: hidden;
    36.             transition: all 0.5s ease;
    37.         }

    39.         .container {
    40.             max-width: 1200px;
    41.             margin: 0 auto;
    42.             padding: 20px;
    43.             position: relative;
    44.             z-index: 1;
    45.         }

    47.         header {
    48.             text-align: center;
    49.             padding: 30px 0;
    50.             position: relative;
    51.         }

    53.         h1 {
    54.             font-size: 3.5rem;
    55.             color: var(--primary-color);
    56.             margin-bottom: 10px;
    57.             text-shadow: 3px 3px 0 var(--shadow-color);
    58.             letter-spacing: 2px;
    59.         }

    61.         .subtitle {
    62.             font-size: 1.3rem;
    63.             color: var(--secondary-color);
    64.             margin-bottom: 30px;
    65.             font-weight: 500;
    66.         }

    68.         .theme-selector {
    69.             display: flex;
    70.             justify-content: center;
    71.             flex-wrap: wrap;
    72.             gap: 15px;
    73.             margin: 30px 0;
    74.         }

    76.         .theme-btn {
    77.             padding: 10px 20px;
    78.             border: none;
    79.             border-radius: 30px;
    80.             font-family: inherit;
    81.             font-weight: 600;
    82.             cursor: pointer;
    83.             transition: all 0.3s ease;
    84.             box-shadow: 0 4px 8px var(--shadow-color);
    85.             display: flex;
    86.             align-items: center;
    87.             gap: 8px;
    88.         }

    90.         .theme-btn:hover {
    91.             transform: translateY(-3px);
    92.             box-shadow: 0 6px 12px var(--shadow-color);
    93.         }

    95.         .theme-btn.active {
    96.             transform: scale(1.05);
    97.             box-shadow: 0 0 15px var(--accent-color);
    98.         }

    100.         .countdown-container {
    101.             background-color: var(--panel-color);
    102.             border-radius: 20px;
    103.             padding: 40px 30px;
    104.             box-shadow: 0 15px 35px var(--shadow-color);
    105.             margin: 30px auto;
    106.             max-width: 900px;
    107.             position: relative;
    108.             overflow: hidden;
    109.             border: 2px solid var(--primary-color);
    110.         }

    112.         .countdown-title {
    113.             text-align: center;
    114.             font-size: 2.2rem;
    115.             margin-bottom: 30px;
    116.             color: var(--primary-color);
    117.             display: flex;
    118.             align-items: center;
    119.             justify-content: center;
    120.             gap: 15px;
    121.         }

    123.         .countdown {
    124.             display: flex;
    125.             justify-content: center;
    126.             flex-wrap: wrap;
    127.             gap: 25px;
    128.             margin: 40px 0;
    129.         }

    131.         .countdown-item {
    132.             display: flex;
    133.             flex-direction: column;
    134.             align-items: center;
    135.             background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    136.             color: white;
    137.             padding: 25px 20px;
    138.             border-radius: 15px;
    139.             min-width: 150px;
    140.             box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    141.         }

    143.         .countdown-value {
    144.             font-size: 4.5rem;
    145.             font-weight: 800;
    146.             line-height: 1;
    147.             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    148.         }

    150.         .countdown-label {
    151.             font-size: 1.3rem;
    152.             margin-top: 10px;
    153.             letter-spacing: 1px;
    154.         }

    156.         .spring-date {
    157.             text-align: center;
    158.             font-size: 1.8rem;
    159.             margin: 30px 0;
    160.             color: var(--primary-color);
    161.             font-weight: 600;
    162.         }

    164.         .decorations {
    165.             position: absolute;
    166.             width: 100%;
    167.             height: 100%;
    168.             top: 0;
    169.             left: 0;
    170.             pointer-events: none;
    171.             z-index: 0;
    172.             overflow: hidden;
    173.         }

    175.         /* 福字烟花效果 */
    176.         .fu-firework {
    177.             position: absolute;
    178.             font-size: 2.5rem;
    179.             font-weight: bold;
    180.             color: var(--primary-color);
    181.             z-index: 0;
    182.             opacity: 0;
    183.             pointer-events: none;
    184.             text-shadow: 0 0 10px var(--accent-color);
    185.         }

    187.         .fu-firework-1 {
    188.             bottom: 10%;
    189.             left: 15%;
    190.             animation: fuFirework 3s infinite ease-out;
    191.         }

    193.         .fu-firework-2 {
    194.             bottom: 15%;
    195.             left: 25%;
    196.             animation: fuFirework 4s infinite ease-out;
    197.             animation-delay: 0.5s;
    198.             font-size: 3rem;
    199.             color: var(--secondary-color);
    200.         }

    202.         .fu-firework-3 {
    203.             bottom: 8%;
    204.             left: 40%;
    205.             animation: fuFirework 3.5s infinite ease-out;
    206.             animation-delay: 1s;
    207.             font-size: 2.2rem;
    208.         }

    210.         .fu-firework-4 {
    211.             bottom: 12%;
    212.             left: 60%;
    213.             animation: fuFirework 4.2s infinite ease-out;
    214.             animation-delay: 1.5s;
    215.             color: var(--accent-color);
    216.         }

    218.         .fu-firework-5 {
    219.             bottom: 5%;
    220.             left: 75%;
    221.             animation: fuFirework 3.8s infinite ease-out;
    222.             animation-delay: 2s;
    223.             font-size: 2.8rem;
    224.         }

    226.         .fu-firework-6 {
    227.             bottom: 18%;
    228.             left: 85%;
    229.             animation: fuFirework 4.5s infinite ease-out;
    230.             animation-delay: 2.5s;
    231.             font-size: 2.4rem;
    232.             color: var(--secondary-color);
    233.         }

    235.         /* 更多福字烟花 */
    236.         .fu-firework-7 {
    237.             bottom: 25%;
    238.             left: 10%;
    239.             animation: fuFirework 3.2s infinite ease-out;
    240.             animation-delay: 3s;
    241.             font-size: 2.6rem;
    242.         }

    244.         .fu-firework-8 {
    245.             bottom: 22%;
    246.             left: 30%;
    247.             animation: fuFirework 4s infinite ease-out;
    248.             animation-delay: 3.5s;
    249.             color: var(--accent-color);
    250.         }

    252.         .fu-firework-9 {
    253.             bottom: 30%;
    254.             left: 50%;
    255.             animation: fuFirework 3.7s infinite ease-out;
    256.             animation-delay: 4s;
    257.             font-size: 3.2rem;
    258.         }

    260.         .fu-firework-10 {
    261.             bottom: 28%;
    262.             left: 70%;
    263.             animation: fuFirework 4.3s infinite ease-out;
    264.             animation-delay: 4.5s;
    265.             font-size: 2.3rem;
    266.             color: var(--secondary-color);
    267.         }

    269.         /* 福字烟花动画 */
    270.         @keyframes fuFirework {
    271.             0% {
    272.                 transform: translateY(0) scale(0.5) rotate(0deg);
    273.                 opacity: 0;
    274.             }
    275.             10% {
    276.                 opacity: 1;
    277.             }
    278.             50% {
    279.                 opacity: 0.8;
    280.                 text-shadow: 0 0 20px var(--accent-color), 0 0 30px var(--accent-color);
    281.             }
    282.             100% {
    283.                 transform: translateY(-100vh) scale(1.5) rotate(360deg);
    284.                 opacity: 0;
    285.             }
    286.         }

    288.         .cloud {
    289.             position: absolute;
    290.             background-color: rgba(255, 255, 255, 0.8);
    291.             border-radius: 50%;
    292.             z-index: -1;
    293.         }

    295.         .cloud-1 {
    296.             width: 120px;
    297.             height: 60px;
    298.             top: 5%;
    299.             left: 20%;
    300.             opacity: 0.7;
    301.         }

    303.         .cloud-2 {
    304.             width: 150px;
    305.             height: 70px;
    306.             top: 10%;
    307.             right: 15%;
    308.             opacity: 0.6;
    309.         }

    311.         .cloud-3 {
    312.             width: 100px;
    313.             height: 50px;
    314.             bottom: 10%;
    315.             left: 15%;
    316.             opacity: 0.5;
    317.         }

    319.         /* 静态福字装饰 */
    320.         .fu-character {
    321.             position: absolute;
    322.             font-size: 4rem;
    323.             color: var(--primary-color);
    324.             font-weight: bold;
    325.             opacity: 0.15;
    326.             transform: rotate(-15deg);
    327.             z-index: 0;
    328.         }

    330.         .fu-1 {
    331.             top: 15%;
    332.             left: 8%;
    333.         }

    335.         .fu-2 {
    336.             top: 10%;
    337.             right: 10%;
    338.             transform: rotate(15deg);
    339.         }

    341.         .fu-3 {
    342.             bottom: 15%;
    343.             left: 12%;
    344.             transform: rotate(10deg);
    345.         }

    347.         .fu-4 {
    348.             bottom: 10%;
    349.             right: 8%;
    350.             transform: rotate(-20deg);
    351.         }

    353.         /* 春联装饰 */
    354.         .chunlian {
    355.             position: absolute;
    356.             width: 30px;
    357.             height: 120px;
    358.             background-color: var(--primary-color);
    359.             border-radius: 5px;
    360.             z-index: 0;
    361.         }

    363.         /* .chunlian-left {
    364.             left: 5%;
    365.             top: 25%;
    366.         }

    368.         .chunlian-right {
    369.             right: 5%;
    370.             top: 25%;
    371.         } */

    373.         footer {
    374.             text-align: center;
    375.             padding: 30px 0;
    376.             color: var(--text-color);
    377.             font-size: 1rem;
    378.             opacity: 0.8;
    379.             margin-top: 30px;
    380.         }

    382.         .highlight {
    383.             color: var(--primary-color);
    384.             font-weight: 600;
    385.         }

    387.         /* 响应式设计 */
    388.         @media (max-width: 768px) {
    389.             h1 {
    390.                 font-size: 2.5rem;
    391.             }

    393.             .countdown {
    394.                 gap: 15px;
    395.             }

    397.             .countdown-item {
    398.                 min-width: 120px;
    399.                 padding: 20px 15px;
    400.             }

    402.             .countdown-value {
    403.                 font-size: 3.5rem;
    404.             }

    406.             .countdown-label {
    407.                 font-size: 1.1rem;
    408.             }

    410.             .theme-selector {
    411.                 gap: 10px;
    412.             }

    414.             .theme-btn {
    415.                 padding: 8px 15px;
    416.                 font-size: 0.9rem;
    417.             }

    419.             /* 在小屏幕上减少福字烟花数量 */
    420.             .fu-firework-5,
    421.             .fu-firework-6,
    422.             .fu-firework-7,
    423.             .fu-firework-8,
    424.             .fu-firework-9,
    425.             .fu-firework-10 {
    426.                 display: none;
    427.             }

    429.             .fu-character, .chunlian {
    430.                 display: none;
    431.             }
    432.         }

    434.         @media (max-width: 576px) {
    435.             .countdown-item {
    436.                 min-width: 80px;
    437.                 padding: 15px 10px;
    438.             }

    440.             .countdown-value {
    441.                 font-size: 2.5rem;
    442.             }

    444.             .countdown-label {
    445.                 font-size: 0.9rem;
    446.             }

    448.             h1 {
    449.                 font-size: 2rem;
    450.             }

    452.             .countdown-title {
    453.                 font-size: 1.7rem;
    454.             }

    456.             .spring-date {
    457.                 font-size: 1.3rem;
    458.             }

    460.             /* 在更小的屏幕上进一步减少福字烟花 */
    461.             .fu-firework-3,
    462.             .fu-firework-4 {
    463.                 display: none;
    464.             }

    466.             .fu-firework {
    467.                 font-size: 1.8rem;
    468.             }
    469.         }

    471.         /* 主题样式 */
    472.         /* 传统红色主题 - 默认 */
    473.         .theme-traditional {
    474.             --primary-color: #d32f2f;
    475.             --secondary-color: #ff9800;
    476.             --background-color: #fef5f5;
    477.             --text-color: #333;
    478.             --accent-color: #ffeb3b;
    479.             --panel-color: #fff;
    480.             --shadow-color: rgba(0, 0, 0, 0.1);
    481.         }

    483.         /* 现代金色主题 */
    484.         .theme-modern {
    485.             --primary-color: #d4af37;
    486.             --secondary-color: #c19a6b;
    487.             --background-color: #1a1a1a;
    488.             --text-color: #f5f5f5;
    489.             --accent-color: #ffd700;
    490.             --panel-color: #2a2a2a;
    491.             --shadow-color: rgba(0, 0, 0, 0.3);
    492.         }

    494.         /* 水墨风格主题 */
    495.         .theme-ink {
    496.             --primary-color: #000000;
    497.             --secondary-color: #666666;
    498.             --background-color: #f0f0f0;
    499.             --text-color: #333;
    500.             --accent-color: #8b4513;
    501.             --panel-color: #fff;
    502.             --shadow-color: rgba(0, 0, 0, 0.15);
    503.         }

    505.         /* 蓝调主题 */
    506.         .theme-blue {
    507.             --primary-color: #1e88e5;
    508.             --secondary-color: #42a5f5;
    509.             --background-color: #e3f2fd;
    510.             --text-color: #0d47a1;
    511.             --accent-color: #ffd54f;
    512.             --panel-color: #fff;
    513.             --shadow-color: rgba(30, 136, 229, 0.2);
    514.         }

    516.         /* 新春绿意主题 */
    517.         .theme-green {
    518.             --primary-color: #2e7d32;
    519.             --secondary-color: #4caf50;
    520.             --background-color: #f1f8e9;
    521.             --text-color: #1b5e20;
    522.             --accent-color: #ffb300;
    523.             --panel-color: #fff;
    524.             --shadow-color: rgba(46, 125, 50, 0.2);
    525.         }
    526.     </style>
    527. </head>
    528. <body class="theme-traditional">
    529.     <!-- 装饰元素 -->
    530.     <div class="decorations">
    531.         <!-- 福字烟花效果 -->
    532.         <div class="fu-firework fu-firework-1">福</div>
    533.         <div class="fu-firework fu-firework-2">福</div>
    534.         <div class="fu-firework fu-firework-3">福</div>
    535.         <div class="fu-firework fu-firework-4">福</div>
    536.         <div class="fu-firework fu-firework-5">福</div>
    537.         <div class="fu-firework fu-firework-6">福</div>
    538.         <div class="fu-firework fu-firework-7">福</div>
    539.         <div class="fu-firework fu-firework-8">福</div>
    540.         <div class="fu-firework fu-firework-9">福</div>
    541.         <div class="fu-firework fu-firework-10">福</div>

    543.         <!-- 其他装饰元素 -->
    544.         <div class="cloud cloud-1"></div>
    545.         <div class="cloud cloud-2"></div>
    546.         <div class="cloud cloud-3"></div>

    548.         <!-- 静态福字装饰 -->
    549.         <div class="fu-character fu-1">福</div>
    550.         <div class="fu-character fu-2">福</div>
    551.         <div class="fu-character fu-3">春</div>
    552.         <div class="fu-character fu-4">春</div>

    554.         <!-- 春联装饰 -->
    555.         <!-- <div class="chunlian chunlian-left"></div>
    556.         <div class="chunlian chunlian-right"></div> -->
    557.     </div>

    559.     <div class="container">
    560.         <header>
    561.             <h1>2026年春节倒计时</h1>
    562.             <div class="subtitle">农历丙午年 · 金马迎春 · 阖家欢乐</div>

    564.             <!-- 主题选择器 -->
    565.             <div class="theme-selector">
    566.                 <button class="theme-btn active" data-theme="traditional">
    567.                     <i class="fas fa-fire"></i> 传统红火
    568.                 </button>
    569.                 <button class="theme-btn" data-theme="modern">
    570.                     <i class="fas fa-gem"></i> 现代金耀
    571.                 </button>
    572.                 <button class="theme-btn" data-theme="ink">
    573.                     <i class="fas fa-paint-brush"></i> 水墨丹青
    574.                 </button>
    575.                 <button class="theme-btn" data-theme="blue">
    576.                     <i class="fas fa-snowflake"></i> 冰雪蓝调
    577.                 </button>
    578.                 <button class="theme-btn" data-theme="green">
    579.                     <i class="fas fa-leaf"></i> 新春绿意
    580.                 </button>
    581.             </div>
    582.         </header>

    584.         <main>
    585.             <div class="countdown-container">
    586.                 <div class="countdown-title">
    587.                     <i class="fas fa-hourglass-half"></i>
    588.                     距离2026年春节还有
    589.                 </div>

    591.                 <div class="spring-date">
    592.                     2026年春节：2026年2月17日（星期二）· 农历正月初一
    593.                 </div>

    595.                 <div class="countdown">
    596.                     <div class="countdown-item">
    597.                         <div class="countdown-value" id="days">00</div>
    598.                         <div class="countdown-label">天</div>
    599.                     </div>
    600.                     <div class="countdown-item">
    601.                         <div class="countdown-value" id="hours">00</div>
    602.                         <div class="countdown-label">小时</div>
    603.                     </div>
    604.                     <div class="countdown-item">
    605.                         <div class="countdown-value" id="minutes">00</div>
    606.                         <div class="countdown-label">分钟</div>
    607.                     </div>
    608.                     <div class="countdown-item">
    609.                         <div class="countdown-value" id="seconds">00</div>
    610.                         <div class="countdown-label">秒</div>
    611.                     </div>
    612.                 </div>

    614.                 <div class="spring-date" style="font-size: 1.4rem; margin-top: 20px;">
    615.                     <i class="fas fa-horse"></i> 2026年是农历丙午年（马年）
    616.                 </div>
    617.             </div>
    618.         </main>

    620.         <footer>
    621.             <p>© 2026春节倒计时 | 作者：<span class="highlight">牛马论坛</span></p>
    622.             <p>祝福您和您的家人：<span class="highlight">马到成功 · 万事如意 · 阖家幸福 · 新春大吉</span></p>
    623.         </footer>
    624.     </div>

    626.     <script>
    627.         // 设置2026年春节日期：2026年2月17日（星期二）
    628.         const springFestivalDate = new Date('2026-02-17T00:00:00');

    630.         // 更新倒计时
    631.         function updateCountdown() {
    632.             const now = new Date();
    633.             const timeDifference = springFestivalDate - now;

    635.             // 如果春节已经过了
    636.             if (timeDifference < 0) {
    637.                 document.getElementById('days').textContent = '00';
    638.                 document.getElementById('hours').textContent = '00';
    639.                 document.getElementById('minutes').textContent = '00';
    640.                 document.getElementById('seconds').textContent = '00';
    641.                 return;
    642.             }

    644.             // 计算剩余的天、小时、分钟和秒
    645.             const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
    646.             const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    647.             const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
    648.             const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);

    650.             // 更新显示
    651.             document.getElementById('days').textContent = days.toString().padStart(2, '0');
    652.             document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    653.             document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
    654.             document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    655.         }

    657.         // 初始化倒计时
    658.         updateCountdown();
    659.         setInterval(updateCountdown, 1000);

    661.         // 主题切换功能
    662.         document.querySelectorAll('.theme-btn').forEach(button => {
    663.             button.addEventListener('click', function() {
    664.                 // 移除所有按钮的active类
    665.                 document.querySelectorAll('.theme-btn').forEach(btn => {
    666.                     btn.classList.remove('active');
    667.                 });

    669.                 // 给当前点击的按钮添加active类
    670.                 this.classList.add('active');

    672.                 // 获取主题名称
    673.                 const theme = this.getAttribute('data-theme');

    675.                 // 移除现有主题类并添加新主题类
    676.                 document.body.className = '';
    677.                 document.body.classList.add(`theme-${theme}`);

    679.                 // 保存主题到本地存储
    680.                 localStorage.setItem('2026-countdown-theme', theme);
    681.             });
    682.         });

    684.         // 页面加载时恢复保存的主题
    685.         window.addEventListener('load', function() {
    686.             const savedTheme = localStorage.getItem('2026-countdown-theme');
    687.             if (savedTheme) {
    688.                 // 移除所有按钮的active类
    689.                 document.querySelectorAll('.theme-btn').forEach(btn => {
    690.                     btn.classList.remove('active');
    691.                 });

    693.                 // 激活保存的主题按钮
    694.                 const activeButton = document.querySelector(`[data-theme="${savedTheme}"]`);
    695.                 if (activeButton) {
    696.                     activeButton.classList.add('active');
    697.                 }

    699.                 // 应用保存的主题
    700.                 document.body.className = '';
    701.                 document.body.classList.add(`theme-${savedTheme}`);
    702.             }
    703.         });

    705.         // 添加一些春节祝福语
    706.         const blessings = [
    707.             "金马迎春，万象更新",
    708.             "马到成功，前程似锦",
    709.             "年年有余，岁岁平安",
    710.             "福星高照，万事如意",
    711.             "新春快乐，阖家幸福"
    712.         ];

    714.         // 随机显示祝福语
    715.         function showRandomBlessing() {
    716.             const blessingElement = document.querySelector('.subtitle');
    717.             if (blessingElement) {
    718.                 const randomIndex = Math.floor(Math.random() * blessings.length);
    719.                 blessingElement.textContent = blessings[randomIndex];

    721.                 // 每隔10秒更换一次祝福语
    722.                 setInterval(() => {
    723.                     const newIndex = Math.floor(Math.random() * blessings.length);
    724.                     blessingElement.textContent = blessings[newIndex];
    725.                 }, 10000);
    726.             }
    727.         }

    729.         // 页面加载完成后显示随机祝福语
    730.         window.addEventListener('load', showRandomBlessing);

    732.         // 添加一些交互效果
    733.         document.querySelectorAll('.countdown-item').forEach(item => {
    734.             item.addEventListener('mouseenter', function() {
    735.                 this.style.transform = 'scale(1.05)';
    736.                 this.style.transition = 'transform 0.3s ease';
    737.             });

    739.             item.addEventListener('mouseleave', function() {
    740.                 this.style.transform = 'scale(1)';
    741.             });
    742.         });

    744.         // 动态生成更多福字烟花
    745.         function createFuFireworks() {
    746.             const decorations = document.querySelector('.decorations');

    748.             // 如果已经有足够的福字烟花，就不再创建
    749.             if (document.querySelectorAll('.fu-firework').length >= 10) return;

    751.             // 创建额外的福字烟花
    752.             for (let i = 11; i <= 16; i++) {
    753.                 const fu = document.createElement('div');
    754.                 fu.className = `fu-firework fu-firework-${i}`;
    755.                 fu.textContent = '福';

    757.                 // 随机位置
    758.                 const left = Math.random() * 90 + 5; // 5% 到 95%
    759.                 const bottom = Math.random() * 20 + 5; // 5% 到 25%

    761.                 // 随机动画参数
    762.                 const duration = Math.random() * 2 + 3; // 3到5秒
    763.                 const delay = Math.random() * 5; // 0到5秒延迟
    764.                 const fontSize = Math.random() * 1 + 2; // 2到3rem
    765.                 const colorIndex = Math.floor(Math.random() * 3);
    766.                 const colors = ['var(--primary-color)', 'var(--secondary-color)', 'var(--accent-color)'];

    768.                 // 应用样式
    769.                 fu.style.left = `${left}%`;
    770.                 fu.style.bottom = `${bottom}%`;
    771.                 fu.style.fontSize = `${fontSize}rem`;
    772.                 fu.style.color = colors[colorIndex];
    773.                 fu.style.animation = `fuFirework ${duration}s infinite ease-out`;
    774.                 fu.style.animationDelay = `${delay}s`;

    776.                 decorations.appendChild(fu);
    777.             }
    778.         }

    780.         // 页面加载后创建动态福字烟花
    781.         window.addEventListener('load', () => {
    782.             // 等一会儿再创建额外的福字烟花
    783.             setTimeout(createFuFireworks, 2000);

    785.             // 每隔一段时间重新创建一些福字烟花
    786.             setInterval(() => {
    787.                 // 随机移除一些福字烟花
    788.                 const fuFireworks = document.querySelectorAll('.fu-firework');
    789.                 if (fuFireworks.length > 15) {
    790.                     const removeCount = Math.floor(Math.random() * 3) + 1;
    791.                     for (let i = 0; i < removeCount && i < fuFireworks.length; i++) {
    792.                         if (fuFireworks[i].className.includes('fu-firework-1') ||
    793.                             fuFireworks[i].className.includes('fu-firework-2') ||
    794.                             fuFireworks[i].className.includes('fu-firework-3') ||
    795.                             fuFireworks[i].className.includes('fu-firework-4') ||
    796.                             fuFireworks[i].className.includes('fu-firework-5') ||
    797.                             fuFireworks[i].className.includes('fu-firework-6') ||
    798.                             fuFireworks[i].className.includes('fu-firework-7') ||
    799.                             fuFireworks[i].className.includes('fu-firework-8') ||
    800.                             fuFireworks[i].className.includes('fu-firework-9') ||
    801.                             fuFireworks[i].className.includes('fu-firework-10')) {
    802.                             // 保留前10个固定的福字烟花
    803.                             continue;
    804.                         }
    805.                         fuFireworks[i].remove();
    806.                     }
    807.                 }

    809.                 // 创建新的福字烟花
    810.                 createFuFireworks();
    811.             }, 8000);
    812.         });
    813.     </script>
    814. </body>
    815. </html>
    复制代码


    fuFireworks, 应用, 祝福语, const
    生命在于折腾，牛马点缀生活。
    回复 转播

    举报

    回复
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    相关帖子

    hot.热文换一批
    1. 🔥牛马论坛-每日早报-2026年01月22日
    2. 发现一个新奇的app，你们还是太会玩了🤣
    3. 这是老三来了吗？
    4. 陌生人爸妈出门互助条约 —— 以爱之名，共筑温暖桥梁
    5. 测试一下图片上传
    6. 分享两个文字广告位代码
    7. 整了一个macmini，可折腾了
    8. 原来的数据清空了，有问题及时反馈
    9. 二开的交友盲盒系统可运营、可对接易支付
    10. 论坛版主职责与要求说明
    11. 早报插件上架应用中心啦！
    12. 牛马论坛[NIUMABBS]-行为规范准则
    13. 记录一下我的第一次航拍夜景吧
    14. 讨论一款工具
    15. 子比主题综合插件-八合一：砍价、团购、抽奖、统计、工单等【移除授权版本】
    16. 分享一个苹果CMS播放器源码（Nplayer）
    17. 这才是清理缓存的终极奥义
    18. 年底了，大家注意防骗
    19. 送几个VIP会员卡和优惠券
    20. 我要来打广告了--三石个人记账
    21. 泰安算是个对无人机很友好的城市了
    22. 【开源项目Tgstate】把 Telegram 变成你的免费不限量网盘！
    23. MoveCar - 挪车通知系统
    24. 还有一个月就过年了
    上一主题     下一主题
    最新热评 加载中...
    牛马论坛（niumabbs.com），一个专注于分享日常新鲜事、职场工作点滴、摸鱼乐趣与各类生活感悟的交流平台。

    快捷访问

    我的帖子 我的收藏 我的好友 我的关注

    附加功能

    任务大厅 道具商店 勋章中心 随便看看

    关于我们

    举报 小黑屋 手机版 站点统计

      关注我们

    • 加入Q群
    • 微信客服
    • QQ客服
    Copyright © 2026 NIUMABBS 版权所有 All Rights Reserved. 劰载中...
    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表