用多层同心圆环配合不同缩放、位移、透明度及轻微旋转，结合transform-origin:center、8s动画时长、cubic-bezier(0.34,1.56,0.64,1)缓动、错开delay，并统一用vw/vh单位和translatez(0)加速，可实现自然隧道纵深感。
怎么用纯CSS做出隧道入口那种越跑越深的错觉
靠单层transform: scale()只会拉伸内容，没有纵深感；真要模拟隧道，得让多层同心圆环以不同速度缩放+位移，形成视差滚动效果。核心是「越靠里的层缩放越慢、位移越少」，反直觉但符合人眼对深度的感知。
- 最外层（背景）缩放快、位移大，模拟远处山体快速后退
- 中间层（中景环）缩放中等、加点
opacity衰减，强化距离分层 - 最内层（近景环）缩放最慢，甚至带轻微旋转，模拟隧道壁纹理掠过眼前
- 所有层必须用
transform: translateZ(0)触发GPU加速，否则动画卡顿明显
CSS动画参数怎么配才不晕、不抖、不掉帧
缩放动画最容易出问题的是transform-origin和缓动函数。默认中心缩放会抖，缓动太急会晕——这不是设计问题，是视觉生理限制。
-
transform-origin必须设为center center，避免层间错位撕裂 - 动画时长统一用
8s起步，低于6s人眼会识别出“在动”，破坏沉浸感 - 缓动选
cubic-bezier(0.34, 1.56, 0.64, 1)，比ease-in-out更平滑，压住首尾加速度突变 - 每层
animation-delay错开-1s到-3s，制造自然视差节奏，别齐刷刷一起动
为什么加了will-change: transform反而更卡
这个属性不是性能银弹，乱用会提前创建过多合成层，吃光内存。尤其在全屏动效里，多层叠加时它常把本该合并渲染的图层强行拆开。
- 只给最外层容器加
will-change: transform，其余子层删掉 - 如果目标设备是移动端，直接去掉
will-change，iOS Safari对它的优化极差 - 用
chrome://gpu检查是否真启用了硬件加速，别信控制台里“已启用”的提示 - 替代方案：用
transform: translateZ(0)代替will-change，更轻量且兼容性好
响应式下隧道动效怎么不崩、不变形
全屏动效一缩放就糊，本质是CSS像素和设备物理像素没对齐。viewport缩放、DPR变化、横竖屏切换都会让环形层错位半像素。
立即学习“前端免费学习笔记（深入）”；
- 所有环形层用
vw/vh单位，禁用%或px，避免父容器重排干扰 - 用
@media (prefers-reduced-motion: reduce)直接停掉动画，不是降帧率——这是可访问性硬需求 - 横屏时加
aspect-ratio: 1/1锁死环形层比例，不然椭圆变隧道就穿帮了 - 测试时务必在
devicePixelRatio=2和=3设备上截图比对边缘锯齿
真正难的不是写几层scale()，是让每一层的缩放速率、延迟、透明度衰减都落在人眼无法察觉“计算痕迹”的区间里。调参时盯着动画看10秒，如果眼睛发酸，说明某层的缓动或位移量越界了。
