翻页倒计时(可复制源代码)

效果演示

文末可一键复制完整代码

源代码

<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>翻页倒计时</title><style>        *{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;margin:0}body{min-height:100dvh;min-width:100vw;display:flex;flex-direction:column;background:#0a0a0a}.stage{flex:1;position:relative;width:100%;height:100%;min-height:0;overflow:hidden}.stagecanvas,.stagesvg{width:100%;height:100%;display:block}.stage--center{display:grid;place-items:center;background:#111}.unit{position:relative;width:min(32vmin,240px);aspect-ratio:11 / 13;perspective:min(140vmin,900px);font:800clamp(2.5rem,11vmin,5.5rem)/1"Segoe UI",sans-serif;color:#eee}.half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#2a2a2a;border:1px solid #555;display:grid;place-items:center;backface-visibility:hidden}.top,.flip-top{top:0;border-radius:0.22em0.22em00;align-items:end;padding-bottom:0.04em;transform-origin:bottom}.bot,.flip-bot{bottom:0;border-radius:000.22em0.22em;align-items:start;padding-top:0.04em}.flip-top{transition:transform 0.45s;transform:rotateX(0deg)}.flip-bot{transform:rotateX(90deg);transition:transform 0.45s}.unit.anim.flip-top{transform:rotateX(-90deg)}.unit.anim.flip-bot{transform:rotateX(0deg)}</style></head><body><divclass="stage stage--center"><divclass="unit"id="u"><divclass="half top"id="top">30</div><divclass="half bot"id="bot">30</div><divclass="half flip-top"id="ft">30</div><divclass="half flip-bot"id="fb">29</div></div></div><script>        (() => { let n = 30; const u = document.getElementById('u'); const top = document.getElementById('top'); const bot = document.getElementById('bot'); const ft = document.getElementById('ft'); const fb = document.getElementById('fb'); functionshow(v) { const s = String(v).padStart(2, '0'); top.textContent = ft.textContent = s; bot.textContent = fb.textContent = s; } show(n); setInterval(() => { if (n <= 0) return; const next = n - 1; fb.textContent = String(next).padStart(2, '0'); u.classList.add('anim'); setTimeout(() => { n = next; show(n); u.classList.remove('anim'); }, 450); }, 1000); })();</script></body></html>

实现思路拆分

翻页倒计时是怎么做出来的？

这一篇做一个翻页倒计时：数字拆成上下半片，每秒沿 X 轴翻页切换，像机场翻牌钟。整页靠 HTML、CSS 与 JavaScript 完成。

整体思路：三块内容分工

可以把成品页面想成三块积木拼在一起：

1. 结构：全视口 .stage + 四片半屏数字层（上静止、下静止、翻页上、翻页下）。
2. 动效：perspective 与 rotateX 做翻牌；.unit.anim 时上半翻出、下半翻入。
3. 脚本：setInterval 每秒写入下一数字、加 .anim，450ms 后同步四片文字并移除动画类。

结构和样式分开写，改布局与动效时各动各的；逻辑集中在脚本，便于调整节奏与交互。

配色与场景氛围

这一版用颜色与背景营造场景，而不只是装饰：

• **舞台 **.stage：#111。
• 色板摘录：#0a0a0a、#111、#eee、#2a2a2a、#555。

让画面「活」起来

Grid place-items: center 让主体在视口正中。全视口 .stage 占满剩余高度，无额外标题栏。min() / clamp() / vmin 让组件随屏幕等比放大缩小。perspective + rotateX 做翻页式 3D 翻转。

动效方面，这一版启用了这些效果：

• .anim 类触发翻页/过渡动画，结束后由脚本移除
• setInterval 驱动定时刷新（如倒计时每秒翻页）
• 脚本切换 class（如 .anim、.open）配合 CSS 过渡
• transition 让状态切换更顺滑

结构拆解：从上到下的图层

页面骨架

1. 全视口 .stage 容器承载效果
2. 无标题 UI，打开即是演示本身

主要结构与图层

1. .stage：全视口舞台容器，承载整块效果
2. .unit：倒计时翻牌单元，内含四片半屏数字
3. .half：上半片或下半片数字，各显示两位数字的一部分

翻页时序

1. 每秒：fb 先写入下一秒的个位数，再给 .unit 加 .anim
2. .flip-top 从 0° 翻到 -90°，.flip-bot 从 90° 翻到 0°，过渡约 450ms
3. 动画结束后四片文字统一为新值，并移除 .anim，等待下一秒

源码获取