CSS3 原地放大是一種常用的效果，特別適合用于鼠標(biāo)懸停在圖片或者文本上時(shí)的動(dòng)畫效果。下面我們來(lái)詳細(xì)了解一下如何使用 CSS3 實(shí)現(xiàn)原地放大效果。

.zoom {
transition: transform .2s; /* 添加過(guò)渡動(dòng)畫 */
}
.zoom:hover {
transform: scale(1.1); /* 鼠標(biāo)懸停時(shí)放大 1.1 倍 */
}

如上所示，我們首先為需要實(shí)現(xiàn)原地放大效果的元素添加類名 .zoom。接著，我們?yōu)?.zoom 類名添加過(guò)渡動(dòng)畫效果，用于實(shí)現(xiàn)平滑的動(dòng)畫效果。

在鼠標(biāo)懸停時(shí)，我們?yōu)?.zoom:hover 添加 transform: scale(1.1); 屬性，將元素放大至原始大小的 1.1 倍。這樣，鼠標(biāo)懸停上去時(shí)就會(huì)出現(xiàn)原地放大的動(dòng)畫效果。

需要注意的是，這里我們使用了 CSS3 的 transform 屬性，而不是直接修改元素的 width 和 height 屬性，這有助于提高頁(yè)面性能和流暢度。

總的來(lái)說(shuō)，CSS3 原地放大是一種簡(jiǎn)單而實(shí)用的效果，適用于許多不同的網(wǎng)頁(yè)設(shè)計(jì)和交互場(chǎng)景。