html – 使用CSS平滑地缩放图像

发布时间：2020-12-14 19:38:10 所属栏目：资源来源：网络整理

导读：我有一张图片,如果用户将鼠标移到它上面我想要缩放.目前,这并不顺利. 例： !DOCTYPE htmlhtmlheadmeta charset="utf-8"titleZoom/titlestyle.zoom:hover { zoom: 1.5; }/style/head bodypimg src="images/image.png" class="zoom"/p/body/html 解决方法使用

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

例：

<!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>

解决方法

使用变换平滑缩放：

.zoom {
 transition: transform 1s;
}

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

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

我created a fiddle,只为你.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!