页面切换过渡动画展示系统

纯 CSS + Vanilla JS · 5 页内容 · 5 种创意过渡效果

第 1 / 5 页
实时概览 / 城市能耗与空气质量

未来城市数据
在一张面板中流动

这页展示一个虚构的城市运营数据中心：能源消耗、空气质量、太阳能回收率与公共交通准点率同时更新。布局强调“主图 + 指标 + 说明”的信息密度与阅读节奏。

综合运行指数
91.4
较昨日提升 3.2%，峰值负载控制稳定。
⚡ 电网负载 68% 🌿 PM2.5 24 ☀️ 光伏回收 39%
交通准点率
96%
早高峰专线运行平稳
夜间照明节能
27%
智能路灯自动分区调节
水资源回收
14.8k
单位：吨 / 日
厨房灵感 / 季节食材与做法

今天吃什么？
从季节风味开始

这一页不是占位内容，而是真正的食谱展示：包含菜品名称、核心食材、烹调特点和风味标签。色彩更暖，布局更贴近日常杂志与美食 App 的阅读体验。

焦香黄油南瓜意面
南瓜泥、鼠尾草、黄油与帕玛森融合，口感绵密，带有坚果香气。
20 分钟奶香适合秋季
炙烤番茄鸡腿饭
鸡腿排外皮焦脆，番茄烤出甜味，搭配香草米饭层次分明。
高蛋白家庭晚餐一锅完成
青柠牛油果虾仁沙拉
青柠汁提亮鲜味，牛油果增加油润感，适合清爽午餐。
轻食海鲜无需重油
本周厨房小结
人气食材
南瓜
常见口味
微酸
平均时长
26m
推荐方式
烤制
旅行计划 / 三日山海路线

从清晨出发，
在山与海之间慢下来

第三页展示一条三日旅行路线：不是简单块状排版，而是包含日程、地点、交通与地图关系。适合测试切换动画在复杂层次中的表现。

Day 1
08:30
老港咖啡馆集合
海边早餐与行程说明，推荐尝试海盐奶油吐司和手冲拼配。
Day 1
14:00
白崖栈道徒步
全程约 5.2 公里，途中可俯瞰潮汐礁石带，建议携带轻薄防风外套。
Day 2
06:10
东岬看日出
最佳机位在木平台右侧，日出前 20 分钟天空层次最丰富。
Day 3
16:40
山谷温泉返程
结束前在温泉驿站停留，整理照片并回顾沿途亮点。
港口
白崖
东岬
温泉谷
策展空间 / 光谱与情绪

把情绪做成展览，
让颜色自己发声

这页模拟数字艺术策展专题：左侧以“作品墙”形式呈现，右侧给出策展说明、主题和观展关键词。用于展示视觉层次密集时的切换效果。

《夜色电流》
将城市霓虹转译为流动的色带与噪点。
《低语云图》
模糊边界与漂浮亮点构成轻盈的梦境空间。
《玻璃花园》
用透明感与暖色调模拟晨光照入温室时的折射。
《相位偏移》
重复结构在偏移中制造不稳定的节奏美感。
策展说明

本期主题是“感知的折射”。作品并不试图复制现实，而是提炼情绪中的亮度、噪声、停顿与突变。观众可以从颜色温度、构图张力与空间深浅中，自行建立阅读路径。

光谱感 电子浪漫 情绪可视化 沉浸式观看
实验记录 / 原型进度与灵感摘录

一个小型实验室，
如何把想法做成原型

最后一页是“创意实验室周报”：包含项目进度条、实验简报与团队引用语。这类信息页面适合验证切换时的整体稳定性与可读性。

项目 A：交互投影桌
多点触控追踪稳定，环境光干扰正在优化。
项目 B：可视化声音墙
低频段反馈更灵敏，动画映射已完成第二版。
项目 C：气味叙事装置
扩香节奏与灯光同步效果显著提升沉浸感。
“好的原型不是把答案做完，而是让问题第一次变得清晰。”
—— 本周团队回顾摘录