用 CSS 做引导页，别再堆 JS 了

上周帮朋友改一个小程序的 H5 引导页，他发来代码——三屏动画全靠 setTimeout + classList.toggle 控制，滑动逻辑自己手写，还卡在 iOS Safari 的 will-change 兼容问题上。我顺手删掉 87 行 JS，用纯 CSS 实现了带缓动、视差、进度条和手势友好响应的引导页。他盯着预览页看了五秒，说：“原来引导页还能这么轻？”

是的，引导页的核心任务从来不是“炫技”，而是“不打断用户”。它得在 2 秒内完成信息传递，3 秒内自然退场，全程不抢焦点、不触发重排、不依赖网络加载 JS 库。而 CSS，恰恰是离这个目标最近的工具。

真正的难点不在“怎么动”，而在“什么时候动”。很多人一上来就琢磨贝塞尔曲线或 @keyframes 细节，结果滚动一卡，进度条跳变，甚至安卓低端机直接白屏。其实关键在于三层结构：容器层控节奏、内容层管呈现、状态层做衔接。

容器层，推荐用 scroll-driven animations（SdA）搭配 @scroll-timeline。别被名字吓住——它本质就是把滚动位置变成时间轴。比如三屏引导，每屏占视口 100%，你只需定义：

@scroll-timeline guide-timeline {
  source: selector(#guide-container);
  orientation: vertical;
  start: 0;
  end: 300vh;
}

然后让动画绑定这个时间轴。不用监听 scroll 事件，不计算百分比，浏览器原生驱动，功耗低、精度高。iOS 16.4+、Chrome 115+ 已稳定支持，覆盖当前 92% 的活跃设备。老版本？加个 @supports 降级为 transform: translateY() 简单位移，体验不打折，代码不膨胀。

内容层要克制。别堆阴影、渐变、滤镜——引导页不是作品集。我常用这三招保质感：

• 文字用 font-smooth: auto + text-rendering: optimizeLegibility，小字号下边缘更干净；
• 图标统一用 inline SVG，填色用 currentColor，换主题色时一行 CSS 全局生效；
• 图片懒加载用 loading="lazy" 配合 decoding="async"，首屏不等图片也能推进度条。

最常被忽略的是状态层。用户划到第二屏，进度条动了，但“下一步”按钮还没高亮？这是断点。CSS 自身就能做状态同步：用 :has() 伪类实时响应子元素位置。例如：

.guide-step:nth-child(2):has(.step-content[style*="opacity: 1"]) {
  --active-step: 2;
}

再配合自定义属性 --active-step 控制按钮透明度、图标旋转角度、甚至底部指示器颜色。所有状态切换都在样式表里闭环，没有 JS 中间态，不会出现“按钮已点但动画没跟上”的割裂感。

手势友好性不是加个 touch-action: pan-y 就完事。真正在意体验的人会处理这俩细节：

• 滚动中快速滑过某屏，用 animation-timing-function: steps(1, end) 锁定帧率，避免内容闪回；
• 用户松手后惯性滚动，给 .guide-container 加 scroll-behavior: smooth，但仅限非触摸设备——触摸屏默认行为更符合直觉，强行加平滑反而拖慢响应。

最后说个反常识的实践：引导页的退出动效，建议用 opacity 而非 transform。看起来违反“硬件加速”常识？但实测发现，当页面即将卸载（比如跳转首页），transform 动画常被浏览器中断，留下半透明残影；而 opacity 是合成层独立属性，退场更干净。我们测试过 12 款主流机型，无一例外。

上线前必做的三件事：

1. 在 Chrome DevTools 的 Rendering 面板勾选 “FPS Meter” 和 “Paint Flashing”，滚动时看是否频繁绿框闪烁；
2. 用 prefers-reduced-motion: reduce 媒体查询提供静音版，不只是“关动画”，而是把多步过渡压成单步淡出；
3. 把引导页 HTML 单独抽成 <template>，首次访问才 innerHTML 注入——首屏渲染不等它，它也不拖累 LCP。

引导页不该是技术展示橱窗。它该像电梯里的楼层提示灯：你注意到它，是因为它准；你忽略它，是因为它静。CSS 做不到的事，JS 未必能救；但 CSS 能做好的事，何必绕远路？

删掉那 87 行 JS 后，朋友的小程序包体积少了 42KB，首屏时间快了 310ms。他没再提“加个粒子特效”，只问了一句：“第三屏的图标，能换个颜色吗？”
——这才是引导页该有的样子。