01
滚动吸附
Scroll Snap — 逐页故事叙述。
每个全屏区块独立成章,滚动时自动吸附对齐。
02
全屏沉浸
每节 100vh 占满整个视口,
高饱和色块依次切换,视觉节奏明快。
03
叙事节奏
五色逐章推进——红、黄、绿、蓝、紫。
每页一个核心观点,不堆砌、不分散。
04
右侧导航
固定右侧圆点指示器,
随时知晓当前位置,点击可跳转。
05
CSS 原生
scroll-snap-type: y mandatory
无需 JavaScript,纯 CSS 实现。
模块化组件
深色底 + 1px 亮边,滚动吸附语言贯穿每一个组件
吸附按钮
亮边框 + 悬停反色
暗色输入框
深底 + 聚焦亮边
嵌套卡片
深底 + 1px 亮边
嵌套卡片
深底 · 1px 亮边
亮色标签
亮边框 + 白实心
默认
吸附
暗色导航
白实心选中
暗色提示
深底 + 1px 亮边
⚠ 操作不可撤销,请确认