01

滚动吸附

Scroll Snap — 逐页故事叙述。
每个全屏区块独立成章,滚动时自动吸附对齐。

02

全屏沉浸

每节 100vh 占满整个视口,
高饱和色块依次切换,视觉节奏明快。

03

叙事节奏

五色逐章推进——红、黄、绿、蓝、紫。
每页一个核心观点,不堆砌、不分散。

04

右侧导航

固定右侧圆点指示器,
随时知晓当前位置,点击可跳转。

05

CSS 原生

scroll-snap-type: y mandatory
无需 JavaScript,纯 CSS 实现。

模块化组件

深色底 + 1px 亮边,滚动吸附语言贯穿每一个组件

吸附按钮

亮边框 + 悬停反色

暗色输入框

深底 + 聚焦亮边

嵌套卡片

深底 + 1px 亮边

嵌套卡片

深底 · 1px 亮边

亮色标签

亮边框 + 白实心

默认 吸附

暗色导航

白实心选中

暗色提示

深底 + 1px 亮边

⚠ 操作不可撤销,请确认