我有一张图片,如果用户将鼠标移到它上面我想要缩放.目前,这并不顺利.
例:
<!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)
使用transform平滑缩放:
.zoom {
transition: transform 1s;
}
Run Code Online (Sandbox Code Playgroud)
但你应该改为scale而不是缩放(感谢@val):
.zoom:hover {
transform: scale(2);
}
Run Code Online (Sandbox Code Playgroud)
我为你创造了一个小提琴.
| 归档时间: |
|
| 查看次数: |
9099 次 |
| 最近记录: |