CSS 鼠標懸停時圖片放大是一種非常流行的效果。這種效果可以使網站頁面更加動態和生動。下面我們來看一下如何通過 CSS 實現這種效果。
img:hover {
transform: scale(1.2);
transition: transform 0.2s;
}以上代碼中，我們使用:hover偽類來設置鼠標懸停時的樣式，使用transform: scale(1.2);來放大圖片，使用transition: transform 0.2s;來設置放大的過渡效果。
以下是一個完整的 HTML 代碼例子：
<!DOCTYPE html>
<html>
<head>
<title>CSS 鼠標懸停時圖片放大</title>
<style>
img:hover {
transform: scale(1.2);
transition: transform 0.2s;
}
</style>
</head>
<body>
<img src="example.jpg" alt="example" width="300" height="200">
</body>
</html>上述代碼定義了一個img標簽，并在樣式表中定義了鼠標懸停時的效果，圖片的路徑和尺寸可以根據需要進行自定義設置。
在實際應用中，我們可以在網頁設計中使用這種效果來吸引用戶的眼球，增加網站的美觀度和互動性。
下一篇css繼承性和特殊性