如何创建 - 悬停时放大
了解如何使用 CSS 在悬停时缩放/缩放元素。
悬停放大
将鼠标悬停在绿色框上:
如何在悬停时放大
实例
<style>
.zoom {
padding: 50px;
background-color: green;
transition: transform .2s;
/* 动画 */
width: 200px;
height:
200px;
margin: 0 auto;
}
.zoom:hover {
transform:
scale(1.5);
/* （150% 缩放 - 注意:如果缩放太大，它会超出视口） */
}
</style>
<div class="zoom"></div>
亲自试一试 »
提示:转到我们的CSS 变换教程，了解有关如何缩放元素的更多信息。
