苹果官网文字渐变展开效果本质是背景渐变横向平移+尺寸拉伸，核心靠background-position控制光条位置、background-size控制展开宽度，二者需分别动画且timing-function错开。
苹果官网那种文字渐变展开效果，本质不是“颜色渐变动画”，而是**背景渐变在固定文字区域上横向平移 + 背景尺寸拉伸控制可见范围**，配合 background-clip: text 实现“从左到右逐字浮现+流动色光”两个层次。直接套用 color 动画或单纯改 opacity 都做不到。
为什么 background-position + background-size 是核心
苹果风格的文字动效里，你看到的“光扫过文字”其实是同一个渐变背景在移动；而“文字从无到有展开”，靠的是让背景的横向尺寸从 0% 慢慢撑满文字宽度——这必须用 background-size 控制，不能靠 width 或 clip-path，否则会触发重排、卡顿、失真。
-
background-position决定“光条当前在哪”，控制流动感 -
background-size: X% 100%（X 从 0 → 200+）决定“光条覆盖多宽”，控制展开节奏 - 二者必须同时动画，且 timing-function 要错开：位置用
linear保匀速，尺寸用ease-out显自然启动
必须写的三行关键样式
漏掉任意一行，效果就断掉：
-
color: transparent—— 不写，文字本色盖住背景，啥都看不见 -
-webkit-background-clip: text和background-clip: text—— 不写，渐变铺满整个盒子，不是只贴着文字走 -
background-size: 0% 100%初始值 —— 不设，动画起始态就是满屏，看不到“展开”过程
示例最小可用结构：
.apple-like-text {
background: linear-gradient(90deg, #000, #fff, #000);
background-size: 0% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation:
expand 1.8s ease-out forwards,
shift 2.4s linear infinite;
}
@keyframes 里两个动画要分开声明
合在一个 @keyframes 里会互相干扰，尤其循环和非循环混用时容易跳帧：
-
expand：只执行一次，background-size从0% 100%→220% 100%，确保光条能完整扫过最宽字符 -
shift：无限循环，background-position从0% 50%→100% 50%，让渐变“流动”起来 - 注意：两个动画的 duration 最好不同（比如 1.8s vs 2.4s），避免周期性重叠导致视觉停顿
Safari 和旧版 Chrome 的兼容雷区
苹果官网效果在 Safari 上最稳，但老版本 Chrome（≤115）和部分安卓 WebView 会忽略 background-clip: text，哪怕写了 -webkit- 前缀：
- 降级方案不是加
text-shadow，而是用@supports检测并 fallback 到纯色 + 微弱text-shadow动画 - 别依赖
text-fill-color: transparent—— 它是废弃属性，color: transparent才是标准写法 - 字体选等宽或明确测试过的非等宽字体（如 -apple-system, BlinkMacSystemFont），中文字符在某些字体下
ch单位不准，会导致展开错位
真正难调的不是写出来，而是让“展开起点对齐第一个字左边、终点刚好盖住最后一个字右边、流动速度不快不慢、循环不卡顿”——这需要实测设备像素比、字体渲染差异和动画帧率，不是改个百分比就能搞定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
