倒计时页面 — HTML/CSS 初学者项目教程

📖 教程步骤

1 HTML 结构

创建事件信息区域（名称、日期）和倒计时网格。每个时间单位是一个 .countdown-item，包含数字和标签。

<div class="countdown-grid">
    <div class="countdown-item">
        <div class="number">365</div>
        <span class="label">Days</span>
    </div>
    <div class="countdown-item">
        <div class="number">12</div>
        <span class="label">Hours</span>
    </div>
    ...
</div>

2 数字卡片样式

用深色渐变背景 + 金色文字让数字卡片看起来高端。添加内部顶部高光线和外部阴影营造 3D 凸起感。使用 tabular-nums 让数字宽度统一，避免抖动。

.countdown-item .number {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.75rem;
    width: 90px; height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #f59e0b;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.08);
}

3 呼吸动画

用 CSS @keyframes 让数字卡片以不同的延迟时间依次脉动，营造动态感。

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.04); }
}
.countdown-item .number {
    animation: pulse 1s ease-in-out infinite alternate;
}
.number.days { animation-delay: 0s; }
.number.hours { animation-delay: 0.15s; }
.number.minutes { animation-delay: 0.3s; }
.number.seconds { animation-delay: 0.45s; }

4 订阅区域

在倒计时下方添加邮箱订阅输入框，与页面整体风格保持一致。用 Flexbox 排列输入框和按钮。

.subscribe-form {
    display: flex;
    gap: 0.5rem;
    max-width: 400px;
    margin: 0 auto;
}
.subscribe-form input {
    flex: 1;
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    color: white;
}
.subscribe-form button {
    padding: 0.7rem 1.5rem;
    background: #f59e0b;
    color: #1a1a2e;
    border: none;
    border-radius: 0.5rem;
    font-weight: 700;
    cursor: pointer;
}

5 完成！

你的倒计时页面已经完成 — 包含事件信息、动画数字卡片和邮箱订阅表单。纯 HTML + CSS 实现，无需 JavaScript。非常适合产品发布和促销活动页面。

💡 扩展思路：替换数字为真实倒计时（需 JS 动态计算），或者添加粒子背景效果（CSS only 粒子动画）。

⏰ 倒计时页面

Product Launch 2026

📖 教程步骤