在CSS中,我們可以通過設(shè)置鼠標(biāo)懸停(hover)狀態(tài)來使圖片在鼠標(biāo)上去時(shí)產(chǎn)生動(dòng)畫效果,以下是一種簡(jiǎn)單的方法:
1、我們需要給圖片添加一個(gè)CSS類,比如my-image
:
<img class="my-image" src="path-to-your-image.jpg" />
2、我們可以使用CSS的hover
偽類來定義鼠標(biāo)懸停時(shí)的樣式,我們可以讓圖片在鼠標(biāo)上去時(shí)放大:
.my-image:hover { transform: scale(1.5); transition: transform 0.3s ease; }
在這個(gè)例子中,transform: scale(1.5)
會(huì)使圖片放大到原來的1.5倍,而transition: transform 0.3s ease
則定義了這個(gè)變換過程需要0.3秒來完成,并且變換過程要平滑(ease)。
你也可以根據(jù)需要設(shè)置其他的動(dòng)畫效果,比如旋轉(zhuǎn)、傾斜等,只需要修改transform
屬性的值即可。
如果你想要在鼠標(biāo)離開圖片時(shí)恢復(fù)原來的樣式,你可以再添加一個(gè)CSS規(guī)則來定義out
偽類:
.my-image:out { transform: scale(1); transition: transform 0.3s ease; }
這樣,當(dāng)鼠標(biāo)離開圖片時(shí),圖片就會(huì)恢復(fù)到原來的大小。