CSS中的選中（:hover）似乎是每個(gè)前端開發(fā)者都熟悉的一種特性。但實(shí)際上它還有另外一個(gè)很酷的效果 - 鼠標(biāo)懸浮在元素上時(shí)，可以使元素變得更大。

實(shí)現(xiàn)選中變大的效果并不難。首先，我們需要選中元素，可以通過以下的代碼實(shí)現(xiàn)：

.element:hover {
/* 選中效果的 CSS */
}

其中，.element是要選中的元素的類名或者ID。接下來，我們需要通過CSS屬性將它變大。這里，我們可以使用transform: scale()屬性。將該屬性的參數(shù)設(shè)置為1.2，元素就會(huì)在鼠標(biāo)懸浮時(shí)變大20％：

.element:hover {
transform: scale(1.2);
}

這就是現(xiàn)成的代碼了。但是，這種方法有一個(gè)問題——它只會(huì)在元素的中心執(zhí)行放大動(dòng)畫。若需要從左上角開始執(zhí)行放大動(dòng)畫，可以在鼠標(biāo)懸浮時(shí)將元素的位置稍稍向上和左側(cè)移動(dòng)，然后再執(zhí)行放大動(dòng)畫：

.element:hover {
position: relative;
top: -5px;
left: -5px;
transform: scale(1.2);
}

請(qǐng)注意，position: relative;在這里非常重要，因?yàn)楫?dāng)你調(diào)整位置時(shí)，你不希望元素把其他元素推出去。

最后，你可以添加transition屬性來控制元素放大動(dòng)畫的完成速度：

.element {
transition: all 0.3s;
}
.element:hover {
position: relative;
top: -5px;
left: -5px;
transform: scale(1.2);
}

現(xiàn)在你已經(jīng)成功地實(shí)現(xiàn)了選中變大效果。試著將它應(yīng)用在你的網(wǎng)站上，看看它為頁面添加了多少更加動(dòng)態(tài)的效果！