【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
/* 设置图片初始大小 */
img {
width: 200px;
height: auto;
}
/* 鼠标悬停时，缩小图片 */
img:hover {
transform: scale(0.8);
}这段代码示例中，我们首先为所有img元素设置了一个初始宽度，并让其高度自动调整。然后，我们使用CSS的:hover伪类选择器来定义当鼠标悬停在图片上时的变换效果，使用transform属性中的scale函数将图片缩小到原始大小的80%。这种效果在用户希望在用户交互时增加页面视觉效果时非常有用。
评论已关闭