如果你想讓你的網站看起來更現代一些,可以考慮給鼠標添加一些動畫效果。CSS有一個鼠標指針屬性,可以讓你控制鼠標懸停或單擊時的動畫效果。
在下面的代碼中,我們將使用鼠標指針屬性為鼠標添加浮動效果。在浮動效果中,指針會在懸停時抖動一下,然后回到原始位置。
cursor: pointer; transition: transform 0.2s ease-in-out; &:hover { transform: translate(-2px, -2px); } &:active { transform: translate(2px, 2px); }
上述代碼中,我們使用了CSS3的漸變效果,使得鼠標在懸停時有一個平滑的過度效果。我們使用"transform"屬性來將鼠標平移了2個像素的距離,制造出鼠標抖動的效果。
在懸停結束時,鼠標會回到原始位置。我們也在"active"狀態下添加鼠標動畫,以確保用戶在單擊時能夠知道他們執行的操作。
現在你已經知道如何給你的網站添加鼠標效果了,快去試試吧!
上一篇css網頁設計課堂筆記
下一篇css鼠標變成手指