在CSS中,要實現(xiàn)鼠標經(jīng)過圖片時圖片移動的效果,可以使用CSS的偽類:hover和transform屬性,以下是一個簡單的示例:
HTML代碼:
<div class="image-container"> <img class="image" src="image.png" alt="image"> </div>
CSS代碼:
.image-container { position: relative; width: 200px; height: 200px; } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(0); transition: transform 0.3s ease-in-out; } .image-container:hover .image { transform: translateX(50px); }
在這個示例中,當鼠標經(jīng)過圖片時,圖片會向右移動50像素,transform屬性用于改變圖片的位置,而transition屬性則用于添加平滑的移動效果,注意,為了使圖片能夠移動,我們需要將圖片的position屬性設置為absolute,并將其top和left屬性設置為0,以確保圖片在容器中的位置。