在懸停的4種動畫文本鏈接的顏色動畫的方法

讓我們探索四種CSS技術，以創建平滑的顏色過渡，以用於懸停的文本鏈接，避免簡單的顏色交換。我們將優先考慮可訪問性，性能和廣泛的瀏覽器兼容性。

方法1： background-clip: text

當前， background-clip: text是實驗性的，並且缺乏舊瀏覽器（IE11及以下）的支持。該方法使用梯度並將其剪輯到文本上。

HTML很簡單： <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Hover</a>

CSS涉及創建一個用硬停止的梯度，使用overflow: hidden用於剪輯，操縱background-clip ， background-size和background-position以控製過渡：

 a {
  位置：相對；
  顯示：內聯塊；
  字體大小：2em;
  字體重量：800;
  顏色：皇家藍色；
  溢出：隱藏；
  背景：線性畢業生（右，午夜藍，午夜藍色50％，皇家藍色50％）；
  背景剪輯：文字；
  -webkit-background-clip：文本； / *對於較舊的Webkit瀏覽器 */
  -webkit-text-fill-color：透明；
  背景大小：200％100％；
  背景位置：100％；
  過渡：背景位置275毫秒；
}
答：懸停{
  背景位置：0 100％；
}

缺點：Safari和Chrome可能會夾住文本裝飾（如下劃線）。

方法2： width / height操縱

這種方法利用data屬性和pseudo元素::before來創建效果。文本裝飾在這裡正常工作。

HTML： <a data-content="Link Hover" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Hover</a>

CSS：我們管理偽元素的寬度（或高度）以控制顏色。

 a {
  位置：相對；
  顯示：內聯塊；
  字體大小：2em;
  顏色：皇家藍色；
  字體重量：800;
  文本描述：下劃線；
  溢出：隱藏；
}
a :: {之前{
  位置：絕對；
  內容：attr（data-content）;
  頂部：0;
  左：0;
  顏色：午夜藍色；
  文本描述：下劃線；
  溢出：隱藏；
  寬度：0;
  白色空間：nowrap;
  過渡：寬度275毫秒；
}
答：懸停:: {
  寬度：100％；
}

但是，使用width或height的過渡比使用transform或opacity過渡效果較低。

方法3： clip-path

該方法採用具有多邊形形狀的clip-path屬性，並在懸停時動態調節多邊形頂點。

HTML與方法2保持相同。 CSS使用pseudo-element ::before ，並操縱clip-path屬性：

 a :: {之前{
  位置：絕對；
  內容：attr（data-content）;
  顏色：午夜藍色；
  文本描述：下劃線；
  剪輯路徑：多邊形（0 0，0 0，0％100％，0 100％）;
  過渡：剪貼板275ms易於;
}
答：懸停:: {
  剪輯路徑：多邊形（0 0，100％0，100％100％，0 100％）;
}

瀏覽器對clip-path的支持各不相同，此方法可能會影響瀏覽器塗料性能。

方法4： transform: translateX()

該技術使用一種掩蓋方法<span></span>元素和a ::before ，通過aria-hidden="true"提高可訪問性。

HTML： Link Hover

CSS：我們使用transform: translateX()將蒙版元素滑入視圖中。

跨度{
  位置：絕對；
  頂部：0;
  左：0;
  溢出：隱藏；
  變換：Translatex（-100％）;
  過渡：變換275毫秒；
}
跨度:: {
  顯示：內聯塊；
  內容：attr（data-content）; / *假設數據包含添加到<a>標籤 */
  顏色：午夜藍色；
  變換：Translatex（100％）;
  過渡：變換275毫秒；
  文本描述：下劃線；
}
答：懸停跨度，a：懸停跨度:: {
  變換：Translatex（0）;
}</a><p>由於使用<code>transform</code> ，此方法提供了良好的瀏覽器兼容性和性能。但是，它需要更多的加價。</p><p>每種技術都提供了一種獨特的方法來實現懸停的動畫色彩變化。最佳選擇取決於您有關瀏覽器支持和性能的特定需求和優先事項。</p>

以上是在懸停的4種動畫文本鏈接的顏色動畫的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！