CSS3在圖片懸停效果方面提供了很多有趣的選擇，使網(wǎng)頁(yè)設(shè)計(jì)變得更加生動(dòng)活潑。以下是一些基于CSS3實(shí)現(xiàn)的圖片懸停效果示例。

/* 圖片放大效果 */
img:hover {
transform: scale(1.2);
transition: transform 0.2s ease-in-out;
}
/* 圖片模糊效果 */
img:hover {
filter: blur(5px);
transition: filter 0.2s ease-in-out;
}
/* 圖片淡出效果 */
img:hover {
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
/* 圖片旋轉(zhuǎn)效果 */
img:hover {
transform: rotate(360deg);
transition: transform 0.2s ease-in-out;
}
/* 圖片陰影效果 */
img:hover {
box-shadow: 0px 0px 10px grey;
transition: box-shadow 0.2s ease-in-out;
}

這些CSS3圖片懸停效果僅是其中的一小部分，通過(guò)對(duì)CSS3的深入學(xué)習(xí)和掌握，我們可以實(shí)現(xiàn)更多種類(lèi)的圖片懸停效果。其實(shí)，圖片懸停效果不僅僅局限于圖片，任何HTML元素都可以使用類(lèi)似的方法實(shí)現(xiàn)炫酷的懸停效果。