Adam Argyle＆Sative Mouse-Out CSS懸停效果

瀏覽Codepen，我偶然發現了亞當·阿蓋爾（Adam Argyle）迷人的CSS懸停效應。演示的應用程序般的感覺，尤其是背景色，從左向右順利過渡，然後向右退出，立即引起了我的注意。我在重新創建它的過程中度過了良好的過程，該過程突出了過渡，轉換和偏移的優雅使用。

我的最初方法集中在背景過渡，操縱background-size和background-position 。但是，我無法實現所需的雙向運動。

接下來，我探索了CSS變換。雖然scaleX()提供了潛力，但將其直接應用於鏈接元素會改變內容，這是不良結果。解決方案？偽元素！

這是我的實施：

首先，基本樣式：

 a {
  位置：相對；
}

a :: {之前{
  背景：＃ff9800;
  內容： ””;
  插圖：0;
  位置：絕對；
  變換：scalex（0）;
  過渡：變換.5s易於進出；
  z index：-1;
}

這將創建一個帶有橙色背景的偽元素（ ::before ），絕對位於鏈接中。 transform: scaleX(0);最初將其隱藏起來，並transition確保了平穩的動畫。

然後定義懸停效應：

答：懸停:: {
  變換：scalex（1）;
  轉換原始：對；
}

在懸停的情況下， scaleX(1)擴展了偽元素，至關重要的是transform-origin: right;將擴展點設置為右側。這是鼠標外行為的關鍵。

魔法在於transition的相互作用和transform-origin的變化。該過渡將scaleX() （在懸停在鼠標外的0到1）順利進行動畫。 transform-origin的變化從left （默認值）向右移動到懸停在right的轉換會逆轉動畫方向，從而產生無縫的雙向效果。最初，我為此而苦苦掙扎，但是transform-origin屬性被證明是缺失的作品。

感謝Adam Argyle的靈感！這種效果展示了當創造性使用時簡單CSS技術的力量。

以上是Adam Argyle＆Sative Mouse-Out CSS懸停效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！