鼠標滑入區塊效果是現代網頁設計中常見的特效之一,它可以增強用戶體驗,提高頁面的交互性。而這個效果可以使用 CSS3 中的 hover 偽類和 transition 屬性來實現。
首先,我們需要在 HTML 中定義一個區塊元素:
<div class="block"> <p>這是一個區塊</p> </div>
然后,我們可以使用 CSS3 對該區塊進行樣式設置:
.block { width: 200px; height: 100px; background-color: #ccc; transition: background-color 0.3s ease-in-out; } .block:hover { background-color: #f00; }
在這段代碼中,我們給區塊設置了一些基本的樣式,比如寬度、高度和背景顏色。然后,我們使用 transition 屬性定義了一個過渡動畫,即當鼠標從區塊外移入時,該區塊的背景顏色會在 0.3 秒內以緩慢的方式從當前顏色過渡到指定顏色。
最后,我們使用 hover 偽類為區塊設置當鼠標移入時的樣式,即改變背景顏色。
這樣,在用戶移入區塊時,就會出現一個平滑過渡的背景顏色變化效果,從而提高用戶體驗和頁面交互性。