跨年倒计时，0点放烟花（附源码、教程）

饼干饿死了

已于 2024-12-23 13:50:11 修改

阅读量2.4k

点赞数 5

分类专栏：前端整活文章标签： html5 前端

于 2024-12-23 11:18:56 首次发布

本文链接：https://blog.csdn.net/weixin_45408984/article/details/144660641

版权

前端同时被 2 个专栏收录

7 篇文章

订阅专栏

整活

5 篇文章

订阅专栏

在这里插入图片描述

跨年倒计时

实现炫酷的新年倒计时和烟花效果网页

前言

在节日期间，制作一个炫酷的网页特效不仅能营造节日气氛，还能提高编程技能。本教程将教你如何用 HTML、CSS 和 JavaScript 实现一个带有动态倒计时、新年祝福语和烟花效果的网页，适用于各种设备，甚至可以在大屏上展示。

功能介绍

倒计时功能：显示距离新年的天、小时、分钟和秒，支持动态更新。
动态欢迎语：欢迎语支持定时切换，增加趣味性。
烟花效果：从屏幕底部发射，到中上方散开，颜色和大小随机。
倒计时结束：倒计时结束后，显示新年祝福语和当前日期时间，烟花效果持续播放。
自适应布局：页面支持全屏展示，适合不同设备。

效果预览

在实现之后，页面将具备以下效果：

动态倒计时：倒计时在屏幕中央，以高科技风格展示。
烟花动画：烟花效果覆盖全屏，发射速度和爆炸区域动态变化。
新年祝福：倒计时结束后，展示祝福语和实时日期时间，完美衔接倒计时。

核心代码实现

HTML

页面结构简单，包括标题、倒计时显示、祝福语，以及用于渲染烟花的 canvas 元素。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年倒计时</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="welcome">新年倒计时</h1>
    <div id="countdown">00 天 00:00:00</div>
    <div id="newYearMessage" class="message">新年快乐！祝你一切如意，幸福常伴！</div>
    <canvas id="fireworksCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

CSS

设置背景渐变、文字动画和全屏自适应样式。

/* styles.css */
body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #000428, #004e92);
    color: #fff;
    font-family: "Arial", sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
}

h1, #countdown, .message {
    z-index: 2;
    position: relative;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.8), 0 0 50px rgba(255, 255, 255, 0.6);
}

.message {
    display: none;
    font-size: 6vw;
    color: #ffeb3b;
    text-shadow: 0 0 40px #ffeb3b, 0 0 80px #ffeb3b;
    margin-top: 2vh;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}