Question

我有一张照片，如果用户将鼠标移到它上面，我想要缩放它。目前，这种情况并不顺利。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Zoom</title>
<style>
.zoom:hover { zoom: 1.5; }
</style>
</head> 
<body>
<p><img src="images/image.png" class="zoom"></p>
</body>
</html>

Answer 1

使用transform平滑缩放：

.zoom {
 transition: transform 1s;
}

但你应该改为scale而不是缩放（感谢@val）：

.zoom:hover { 
    transform: scale(2); 
}

我created a fiddle，只为你。

Answer 2

只需添加此css并查看其外观：）

.zoom{  -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); transition:0.7s ease all; -webkit-transition:0.7s ease all; -moz-transition:0.7s ease all;}

.zoom:hover{ -moz-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5);}

Answer 3

要进行平滑过渡，必须使用过渡属性。

   .zoom{
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
}

.zoom:hover {
 transform : scale(1.25);
 -moz-transform : scale(1.25);
 -webkit-transform : scale(1.25);
 -o-transform : scale(1.25);
 -ms-transform : scale(1.25);
}

使用CSS平滑地缩放图像

3 个答案: