瀏覽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中文網其他相關文章!