html鼠标悬停图片放大
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
要实现鼠标悬停时图片放大的效果，可以使用CSS的:hover伪类来改变图片的大小。以下是一个简单的HTML和CSS示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Hover Effect</title>
<style>
img:hover {
transform: scale(1.1); /* 放大10% */
transition: transform 0.3s ease; /* 动画过渡效果 */
}
</style>
</head>
<body>
<img src="image.jpg" alt="Sample Image" width="200" height="200">
</body>
</html>在这个例子中，当鼠标悬停在<img>元素上时，transform属性会将图片缩放大1.1倍，transition属性则定义了这个变化发生的时间长度和效果。
评论已关闭