操作指南 - 懸停縮放
學習如何使用 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 轉換教程，瞭解更多關於如何縮放元素的資訊。
