首頁 >web前端 >css教學 >Adam Argyle&Sative Mouse-Out CSS懸停效果

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

Christopher Nolan
Christopher Nolan原創
2025-03-15 09:54:10575瀏覽

亞當·阿蓋爾(Adam Argyle

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

我的最初方法集中在背景過渡,操縱background-sizebackground-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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn