目录

操作方法 - 悬停缩放

❮ 上一节下一节 ❯

了解如何使用 CSS 在悬停时缩放/缩放元素。

悬停放大

将鼠标悬停在绿色框上：

如何在悬停时缩放

示例

<style>
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
}

.zoom:hover {
transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>

<div class="zoom"></div>

亲自试一试 »

提示：去我们的CSS 变换教程了解有关如何缩放元素的更多信息。

❮ 上一节下一节 ❯