如圖所示，這是一個文本陰影效果，陰影有多個顏色，鼠標懸停時文本陰影效果消失，文本回到正常的效果。讓我們逐步分解代碼，看看如何使用純CSS實現這個效果的。

基於以上動圖可以分析出以下是本次實現的主要幾個功能點：

• 文本有多個顏色的陰影的效果
• 文本有空心鏤空的效果
• 鼠標懸停時文本回到正常效果
• 鼠標懸停時英文字體的粗細有變化

實現過程

多層顏色陰影

文字的陰影用text-shadow實現，但是一般情況下我們都是隻控制一個顏色，多個顏色應該怎麼控制呢？其實該屬性支持添加多個文本陰影層，以創建特殊的陰影效果。每個層各自控制水平偏移量、垂直偏移量、模糊半徑和顏色定義。這裏的多個顏色的陰影代碼如下：

text-shadow: 10px 10px 0px #07bccc,
  15px 15px 0px #e601c0,
  20px 20px 0px #e9019a,
  25px 25px 0px #f40468,
  45px 45px 10px #482896;

文本鏤空效果

文字的鏤空效果是用-webkit-text-stroke這個屬性實現，-webkit-text-stroke 是一個用於在網頁中設置文本描邊的 CSS 屬性。它是 WebKit 瀏覽器引擎（如Chrome、Safari）的專有屬性。

這個屬性允許開發者為文字添加一條描邊線，使文字看起來更加突出和醒目。通過指定描邊的寬度和顏色，可以控制描邊的外觀。

語法如下：

-webkit-text-stroke: <width> <color>;

<width> 指定描邊的寬度，可以是正值或負值（負值用於創建內部描邊）。<color> 指定描邊的顏色值。

請看以下在瀏覽器中調試-webkit-text-stroke的效果。

文本粗細變化

文本粗細變化是基於 font-variation-settings 屬性完成，這個屬性用於設置字體的變體屬性。可以用來定義 OpenType 字體的變化軸（variation axis）和對應的值（value），以便控制字體的外觀和樣式。

OpenType 字體是一種可縮放字型的字體類型，支持多種語言和高級排版功能的字體文件格式，它提供了更大的靈活性和一致性，使得設計師和排版師能夠創建出更具創意和專業的排版作品。

它允許開發者通過調整字體的參數來獲得不同的字形效果。這些參數可以包括字重（weight）、寬度（width）、斜度（slant）、粗細（contrast）等。

以下是 font-variation-settings 屬性的語法：

font-variation-settings: <axis-name> <axis-value>;

• <axis-name> 指定字體變體的軸名稱，如“wght”表示字重，可以根據具體字體的支持情況選擇對應的軸。
• <axis-value> 指定字體變體軸的值，可以是一個數值或一個具體的字符串。

例如，要設置字體的字重為 700，可以使用以下代碼：

font-variation-settings: "wght" 700;

需要注意的是，font-variation-settings 屬性需要字體本身支持相應的變體軸和值。由於不同瀏覽器支持的字體和變體軸可能有所不同，本文的示例本文可以看到中文字體是沒有發生變化的，就是因為這裏使用的字體不支持中文。

有興趣的可以看這篇文章詳細介紹：CSS小技巧使用 font-variation 讓文字起飛

這裏的示例效果增加的代碼如下：

font-variation-settings: "wght" 900, "ital" 1;

動畫實現

接下來完成鼠標懸停時的動畫效果，基於以上完成的 font-variation-settings 和 text-shadow，當鼠標懸停時設置文本陰影為none移除文本陰影，消除多層陰影效果，同時設置字體的粗細為100（正常）和字體樣式設置為非斜體，從而恢復默認設置的font-variation-settings屬性值。這裏因為設置了字體的粗細為100所以字體的鏤空效果也會消失，但這前提是使用的字體支持font-variation-settings屬性。代碼如下：

main:hover {
  font-variation-settings: "wght" 100, "ital" 0;
  text-shadow: none;
}

為了在懸停期間所應用的更改具有平滑的過渡效果，還增加了transition: all 0.5s過渡設置，持續時間為0.5秒。

優化版本

上面的版本是默認有陰影，鼠標懸停後恢復正常，以下將順序調整為默認正常，鼠標懸停後顯示陰影效果，並調整了陰影的顏色。

文本陰影代碼如下：

text-shadow: 
  10px 10px 0px #07bccc, 
  15px 15px 0px #01e647,
  20px 20px 0px #e9b701,
  25px 25px 0px #f40468,
  45px 45px 10px #482896;

在線預覽

碼上掘金地址：
https://code.juejin.cn/pen/7300188992132743220

最後

本文解析了通過 CSS text-shadow實現多層文字陰影效果，並使用 font-variation-settings 和 -webkit-text-stroke 實現鼠標懸停時文本粗細以及文本陰影的變化，有興趣的朋友可以嘗試看看~

看完本文如果覺得有用，記得點個贊支持，收藏起來説不定哪天就用上啦～

專注前端開發，分享前端相關技術乾貨，公眾號：南城大前端（ID: nanchengfe）

參考

原文動畫參考：https://codepen.io/gayane-gasparyan/pen/vYmYMeV