在CSS中,您可以使用transform
屬性來使圖片在鼠標(biāo)放上去時(shí)縮小,以下是一個(gè)簡(jiǎn)單的示例:
1、為您的圖片添加一個(gè)CSS類,例如my-image
:
<img class="my-image" src="your-image-source.jpg" />
2、在CSS中添加以下樣式:
.my-image { transition: transform 0.3s ease; /* 添加過渡效果,使圖片縮小更平滑 */ } .my-image:hover { transform: scale(0.9); /* 當(dāng)鼠標(biāo)放上去時(shí),圖片縮小到原大小的90% */ }
在這個(gè)示例中,當(dāng)您將鼠標(biāo)放在圖片上時(shí),圖片會(huì)縮小到原大小的90%。transform: scale(0.9)
語句會(huì)使圖片的寬度和高度都縮小到原大小的90%,您可以根據(jù)需要調(diào)整這個(gè)比例。
transition
屬性添加了一個(gè)過渡效果,使圖片縮小更加平滑,您可以根據(jù)需要調(diào)整過渡時(shí)間(在這個(gè)示例中是0.3秒)。
這種方法可以使圖片在鼠標(biāo)放上去時(shí)縮小,而不會(huì)導(dǎo)致頁面重新加載或閃爍,希望這對(duì)您有所幫助!