CSS 技術可以實現鼠標移入圖片抖動的效果,給用戶帶來視覺上的沖擊。下面我們通過一些簡單的代碼實現這個效果。
/*樣式規則*/ .image { position: relative; display: inline-block; overflow: hidden; transition: transform 0.3s; transform: scale(1); } .image:hover { transform: scale(1.1); } /*HTML 代碼*/ <div class="image"> <img src="img/photo1.jpg" alt="photo1"> </div>
在上面的代碼中,我們首先創建了一個類名為 "image" 的樣式規則。它設置了圖片的 "position" 屬性為 "relative",將其 "display" 屬性設置為 "inline-block",并將 "overflow" 屬性設置為 "hidden"。同時,為了實現抖動的效果,我們使用了 "transform" 屬性和 CSS3 的過渡效果 "transition"。
當鼠標移入圖片時,我們通過:hover 偽類選擇器觸發 "transform" 屬性中的 "scale" 內置函數。這樣就可以使圖片在鼠標移入時縮小,從而產生抖動的效果。
在 HTML 代碼中,我們創建了一個 div 元素,使用了 "image" 類名,并在其中添加了一個 img 元素。當我們將鼠標移入圖片上時,就可以看到這個簡單而又炫酷的抖動效果。