CSS是一門網頁設計必備的技能，其作用是優美的搭配HTML標簽以便于設計出更加美觀的頁面展示效果。其中，一個常見的特效是從點擊處放大的效果。
// HTML代碼
<div class="box">
<img src="picture.jpg" alt="picture">
</div>
// CSS代碼
.box {
position: relative; /* 相對定位 */
overflow: hidden; /* 隱藏溢出部分 */
}
.box img {
position: absolute; /* 絕對定位 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%); /* 偏移 */
transition: transform .3s ease-out; /* 過渡效果 */
}
.box:hover img {
transform: scale(1.2); /* 放大1.2倍 */
}首先，在HTML中創建一個包含圖片的
容器，并且為其添加一個類名box。然后，在CSS中對其進行樣式設計。
為box設置相對定位和overflow:hidden屬性是為了讓圖片能夠在容器內部居中而不溢出。接下來為img元素添加絕對定位，將其移到容器的中心位置，再利用transform: translate(-50%, -50%)偏移50%。同時，該元素還需要添加過渡效果transition: transform .3s ease-out，以便于在鼠標hover時呈現動畫效果。
最后，在box:hover狀態下再次利用transform: scale(1.2)對img進行放大，從而達到點擊處放大的效果。