CSS3提供了許多鼠標滑過動畫效果,其中之一就是鼠標滑過文字移動效果。下面我們來看一下如何實現這個效果。
// HTML代碼 <p class="move">鼠標滑過我試試</p> // CSS3代碼 .move { transition: all .3s ease; } .move:hover { transform: translateX(10px); }
首先,在HTML代碼中添加一個class名為"move"的p標簽。接著,在CSS3代碼中定義這個class的鼠標滑過效果。
我們使用CSS3中的transform屬性來實現文字的移動效果。transform屬性可以在x,y,z軸上進行旋轉,縮放,移動等變換操作。在這個例子中,我們使用translateX屬性來沿著x軸移動文字。
當鼠標滑過這段文字時,我們通過:hover偽類選擇器來定義文字移動的效果。我們使用translateX(10px)來將文字沿著x軸移動10個像素。在這個例子中,我們使用了transition屬性來定義動畫過渡的時間,緩和函數和延遲時間。
這樣,當我們把鼠標放在這段文字上時,文字就會沿著x軸向右移動10像素。這個效果就通過CSS3的transform屬性和:hover偽類選擇器實現了。