CSS3圓形鼠標(biāo)經(jīng)過(guò)是一種非常有趣的交互效果，可以給網(wǎng)站增加一些生動(dòng)、活潑的氛圍。下面就為大家介紹一下如何使用CSS3制作圓形鼠標(biāo)經(jīng)過(guò)效果。

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #ccc;
transition: all 0.3s ease;
}
.circle:hover {
transform: scale(1.2);
}

首先，我們先創(chuàng)建一個(gè)div元素，并設(shè)置寬高為100px、邊框半徑為50%的圓形，背景顏色為灰色。

接下來(lái)，我們使用CSS3的transition屬性來(lái)實(shí)現(xiàn)圓形鼠標(biāo)經(jīng)過(guò)的平滑過(guò)渡效果。通過(guò)設(shè)置transition屬性的all值為0.3s，我們就可以讓圓形在0.3秒內(nèi)從普通狀態(tài)轉(zhuǎn)換到hover狀態(tài)。

最后，我們使用CSS3的transform屬性來(lái)實(shí)現(xiàn)圓形鼠標(biāo)經(jīng)過(guò)的縮放效果。通過(guò)設(shè)置transform:scale()的值為1.2，我們可以讓圓形在鼠標(biāo)懸停時(shí)縮放到原來(lái)的1.2倍。

通過(guò)以上的CSS3代碼，我們就可以輕松地實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圓形鼠標(biāo)經(jīng)過(guò)效果。當(dāng)然，我們也可以通過(guò)更多的CSS3屬性，如box-shadow、rotate等來(lái)增加更多的交互效果，讓網(wǎng)站更加生動(dòng)有趣。