使用CSS平滑地缩放图像

6 html css html5 css3

我有一张图片,如果用户将鼠标移到它上面我想要缩放.目前,这并不顺利.

例:

<!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>
Run Code Online (Sandbox Code Playgroud)

tja*_*ati 8

使用transform平滑缩放:

.zoom {
 transition: transform 1s;
}
Run Code Online (Sandbox Code Playgroud)

但你应该改为scale而不是缩放(感谢@val):

.zoom:hover { 
    transform: scale(2); 
}
Run Code Online (Sandbox Code Playgroud)

我为你创造了一个小提琴.

  • 这只适用于缩放设置为变换:缩放(1.5),而不是缩放(1.5) (2认同)