悬停时放大

---

了解如何使用 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 变换教程，了解有关如何缩放元素的更多信息。