纯CSS复刻GTA6官网滚动特效：场景切换与渐变文字详解

GTA6官网上线后，不少前端开发者都被它的滚动交互吸引：页面下滑时背景会缓缓缩放，场景之间以交叉淡入淡出的方式平滑切换，底部标题文字还带着持续流动的渐变色。很多人以为这需要大量JavaScript才能实现，但实际上，这套视觉效果的核心完全可以用纯CSS完成。本文梳理一位前端博主在CodePen中逐步还原该效果的完整思路，拆解其中几个关键技术点。

场景与面板：搭建可叠加的滚动结构

整个效果的基础在于页面结构的划分。作者把内容分成两类区块：一类叫做「场景」（scene），对应GTA6官网那些会交叉淡变的全屏画面；另一类叫做「面板」（panel），是始终可见、正常随滚动条滑过的常规内容区。

关键的实现技巧并不是把场景本身设为position: fixed，而是在每个场景内部放一个layer图层，对这个图层做固定定位。这样所有场景的内容都会在视口中相互叠加、随时待命，而场景容器仍然保留height: 100vb的实际高度去占据滚动空间。换句话说，滚动条照常滚动，但真正需要展示的内容早已固定堆叠在视口里，只等动画去控制它们的显隐。

作者在调试阶段特意给各元素加了边框和降低不透明度，用可视化的方式确认「哪些内容在滚动、哪些内容在原地叠加」，这是理解整套方案的前提。

view-timeline：让滚动驱动动画

要让场景在进出视口时自动切换，核心是CSS的滚动驱动动画（scroll-driven animations）。作者坦言这项特性目前浏览器支持有限（主要是Chrome），但强调「这是纯CSS玩法，我们在找乐子」。

具体做法是在场景元素上声明view-timeline，命名一个时间线（如--scene）并指定关注block轴，然后在内部图层上用animation-timeline: --scene接收这条时间线信息。这样每个场景进出视口的进度，就能精确地传递给对应的动画。

作者分享了一个重要的工程经验：不要试图用单个关键帧动画去管理所有变化。进场、退场、缩放是三件不同的事，硬塞进一个keyframe里会变得难以维护。更好的办法是拆成多个独立动画，再用animation-range分别控制各自的触发区间。

滚动驱动动画（Scroll-driven Animations）是CSS在2023年引入的原生能力，核心思路是把页面滚动进度或元素在视口中的可见进度，直接映射为动画播放进度，无需任何JavaScript事件监听。它包含两种时间线类型：ScrollTimeline追踪滚动容器本身的滚动位置，ViewTimeline则追踪某个元素相对于视口的进入/离开状态。view-timeline属性正是在CSS中声明一条ViewTimeline的方式，其进度从元素刚进入视口（entry 0%）到完全离开视口（exit 100%）。截至2024年，该特性在Chrome/Edge 115+已正式支持，Firefox仍需开启实验标志，Safari尚未实现，因此目前主要适合渐进增强场景或创意实验性项目。

交叉淡入与微缩放：堆叠动画的精细控制

场景的淡入淡出被拆成了scene-in和scene-out两个关键帧。scene-in从opacity: 0配合visibility: hidden过渡到可见；scene-out则反向回到透明隐藏。作者在视频中也提出了一个开放性的无障碍疑问——当内容透明度为0时，是否应该用visibility: hidden把它移出可访问性树。由于这些场景内多为装饰性画面，交互元素都放在始终可见的面板里，他倾向于隐藏，但也坦承不确定这是否必要。

真正让区间可控的是animation-range。例如scene-in设为entry 50%到entry 100%，意味着场景进入视口一半时开始淡入、完全进入时达到满不透明度；scene-out则用exit 50%到exit 100%，让场景滑出一半后开始淡出。

在此基础上，作者补上了GTA6官网那种「额外的味道」——轻微缩放。新增一个subtle-zoom关键帧，从scale(1.1)过渡到scale(1)。之所以是放大再收，而不是缩小，是因为全屏元素一旦缩小就可能露出边缘、破坏满屏效果。缩放的区间设为entry 50%到exit 100%，让画面在整个可见周期内持续缓慢收拢，细节上更接近原站的质感。

场景切换遮罩：用伪元素制造「蒙层」

仅靠不透明度切换，在两个场景的空档期会显得过亮，缺少GTA6那种明显的转场遮罩。作者为此在场景上用::after伪元素铺满整个区域，并新建一个scene-switch关键帧，让遮罩背景色淡入到opacity: 0.9（原站并非完全覆盖，所以不用1）。

这一步调试踩了不少坑。作者最初给伪元素设了z-index: 1并用forwards填充，结果遮罩停在终态、盖住了后面的场景。解决办法是给每个场景用z-index: sibling-index()创建独立的层叠上下文（stacking context），把伪元素约束在各自场景内。他借此顺带科普了层叠上下文的概念——这正是理解position: fixed、z-index相互作用的关键，也是写出能真正跑通的CSS的底层能力。

最终把遮罩的animation-range调成exit 0%到exit 100%，并微调触发点，制造出场景之间的交叉重叠，让转场既有变暗蒙层又能平滑衔接。

层叠上下文（Stacking Context）是浏览器渲染引擎在处理元素层叠顺序时划定的独立作用域。一旦某个元素形成了自己的层叠上下文，其内部子元素的z-index就只在这个上下文内部排序，不会与外部元素的z-index直接比较。触发新建层叠上下文的条件包括：设置了非auto的z-index且position不为static、设置了opacity小于1、使用了transform/filter/will-change等属性。z-index: sibling-index()是CSS新提案中的函数，能让每个兄弟元素自动获得依序递增的z-index值，相当于批量用CSS代替手写nth-child选择器逐个赋值，大幅简化多个并列场景的层叠管理。

渐变文字：无需时间线的流动色彩

页面底部的标题文字带着会随滚动流动的渐变色，这部分实现反而最简单，而且不依赖场景时间线——因为它本身在独立的面板里。

做法分两层。先在文字的父容器上用linear-gradient配合background-clip: text和color: transparent，让整段文字共用一个渐变（放在父级而非每个文字元素上，可以避免每行文字各自重复渐变导致的割裂感）。接着利用@property注册自定义属性（如--gradient-start、--gradient-end）——因为渐变本身不能直接动画，但注册过的自定义属性里的具体数值可以被过渡。最后用animation-timeline: view驱动这些颜色值的变化，文字进出视口时渐变色便会自然流动起来。

@property是CSS Houdini规范的一部分，允许开发者显式注册自定义属性，并声明其语法类型（如<color>、<number>、<percentage>等）和初始值。普通CSS自定义属性（--var）对浏览器来说只是任意字符串，无法被动画或过渡插值；而通过@property注册并指定类型后，浏览器才能理解它「是一个颜色值」，从而在两个颜色状态之间计算中间帧。用于渐变流动文字时，分别注册--gradient-start和--gradient-end为<color>类型，将其填入linear-gradient()中，再配合animation驱动颜色变化——浏览器就能对渐变端点颜色做真正的平滑过渡，而不是从一个颜色直接跳切到另一个颜色。该特性目前在Chrome/Edge已支持，Firefox 128+也已正式支持。

小结

这套复刻清晰地说明了一件事：许多看似需要重度JavaScript的滚动特效，如今借助view-timeline、animation-range、@property等CSS能力已经可以原生实现。更重要的是作者反复强调的观点——在AI辅助写代码的时代，无论你是靠提示词生成还是手写CSS，真正能让你做出这些细腻决策、并在卡住时快速调试的，是对语言底层机制的深入理解。AI或许能生成一个场景切换的雏形，但那些让效果「更有质感」的微缩放、交叉遮罩、层叠控制，仍需要开发者自己判断和打磨。