鏈接強調將動畫變成塊背景

這種整潔的效果增強了標準鏈接的強調。默認下劃線的鏈接懸停在懸停時，將下線轉換為較厚的線，模仿背景顏色效果。

觀察此對超級友好網站的影響：

存在幾種方法：

• 盒子陰影：超級友好使用box-shadow: inset 0 -0.07em 0 #0078d6;過渡到box-shadow: inset 0 -0.85em 0 #a2d5fe;在懸停。 Andres Cuervo對此進行了調整，並且更正的版本解決了初始偏移問題。此方法處理線路斷裂有效。
• 偽元素：絕對在鏈接中定位偽元素並為其高度或scaleY製作動畫是另一個選擇。但是，這種方法與包裹到新線路的鏈接中掙扎。
• 線性梯度：使用帶有尖銳顏色的線性梯度模擬下劃線，並對懸停的background-position進行動畫會產生效果。這種方法管理的線路斷裂比偽元素更好。以前的文章中也存在類似的例子。
• text-decoration屬性：現代text-decoration: underline;提供text-decoration-skip-ink; ，優雅地避免了後裔。新屬性，例如text-decoration-color ， text-decoration-thickness和text-decoration-offset可提供精細的控制，從而實現此效果。 Miriam Suzanne的Firefox夜間演示展示了這種出色的方法（瀏覽器兼容性待處理）。

結論：為了立即提供廣泛的瀏覽器支持，建議使用box-shadow技術。但是，對於增強的美學，控制和代碼可讀性，一旦建立更廣泛的瀏覽器支持，較新的text-decoration屬性是可取的長期解決方案。

以上是鏈接強調將動畫變成塊背景的詳細內容。更多資訊請關注PHP中文網其他相關文章！