关于前端:从苹果官网学到的炫彩文字技术

明天逛了一把苹果官网，筹备买点货色，翻着翻着不禁地赞叹苹果的 UI 和交互，多年不写文章的我，当初难得说出如许壮丽的辞藻，反正就一个字，难看！

就这种文字效果，你就说牛不牛通？

作为一名对视觉要求很高的资深前端，怎么能没有一点职业敏感度呢🤣？这个成果是怎么实现的？是图片吗？随即鼠标移上去，哇！能够选！是文字无疑了，CSS 怎么写的？关上调试工具，找到它。

要害 CSS 代码这里贴出来：

.section-xdr .section-headline {background-image: linear-gradient(90deg,#2e4f8b 0%,#3e589d 35%,#8f619b 60%,#d0718f 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

看到这，你们发现啥了没有？

1. background-image: linear-gradient(...);——整个.section-headline 背景突变
2. background-clip: text;——按文字区域裁剪背景（整个矩形只剩下文字的区域了）
3. color: transparent;——文字通明（把背景色彩透出来）

妙！

试验一下，还是苹果官网，找一处一般文字：

用这里的「全方位看起来。」来测试一下以上的 CSS。

1. 增加 background-image: linear-gradient(...);

2. 增加 -webkit-background-clip: text;

3. 增加 color: transparent;

奇怪的常识又减少了不是吗？

撒花！