從蘋果官網學到的炫彩文字技術

今天逛了一把蘋果官網，準備買點東西，翻着翻着不由地讚歎蘋果的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;

奇怪的知識又增加了不是嗎？

撒花！