CSS3中提供了豐富的鼠標停留效果,可以讓網站更加生動活潑,增強用戶體驗。
以鼠標懸停在按鈕上為例,我們可以使用:hover偽類選擇器來實現這個效果:
button:hover { background-color: #FFA500; color: #FFF; }
上述代碼表示當鼠標懸停在按鈕上時,按鈕的背景色將變成橙色,字體顏色變成白色。
除了改變顏色外,我們還可以利用CSS3的過渡效果(transition)來實現更加平滑的動畫效果:
button { background-color: #FFC107; color: #FFF; padding: 10px 20px; border: none; transition: background-color 0.3s ease; } button:hover { background-color: #FF9800; }
上述代碼表示按鈕的背景色和字體顏色都設置為橙色。同時,按鈕在默認狀態下也應用了過渡效果,即鼠標懸停時背景色會在0.3秒內從橙色漸變到深橙色。這種動畫效果可以讓用戶感到更加自然。
CSS3還提供了很多其他的鼠標停留效果,例如鼠標懸停時文字底部出現下劃線、鼠標懸停時元素旋轉等等。我們可以根據具體需求選擇相應的效果,并結合過渡效果來實現流暢的動畫效果。