CSS3動(dòng)畫(huà)是一種非常強(qiáng)大的技術(shù)，可以讓我們的網(wǎng)頁(yè)看起來(lái)更加生動(dòng)、有趣。其中，使用CSS3實(shí)現(xiàn)圓圈動(dòng)畫(huà)非常常見(jiàn)。下面我們來(lái)介紹一下如何實(shí)現(xiàn)這個(gè)效果。

/* 創(chuàng)建一個(gè)div，設(shè)置圓圈樣式 */div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: relative;
}/* 創(chuàng)建動(dòng)畫(huà) */@keyframes circle {
0% {transform: scale(1);}
50% {transform: scale(2);}
100% {transform: scale(1);}
}/* 設(shè)置動(dòng)畫(huà)細(xì)節(jié) */div:before {
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
background-color: white;
position: absolute;
top: -50%;
left: -50%;
animation: circle 1s ease-in-out infinite;
}

我們首先創(chuàng)建了一個(gè)div元素，并設(shè)置了圓圈的樣式。接下來(lái)，我們使用@keyframes關(guān)鍵字創(chuàng)建了一個(gè)名為“circle”的動(dòng)畫(huà)。在這個(gè)動(dòng)畫(huà)中，我們定義了三個(gè)關(guān)鍵幀：0%、50%和100%。分別代表了動(dòng)畫(huà)的起始、中途和結(jié)束狀態(tài)。其中，使用transform屬性實(shí)現(xiàn)了圓圈的縮放效果。

最后，我們還設(shè)置了動(dòng)畫(huà)細(xì)節(jié)。使用:before偽元素創(chuàng)建了一個(gè)大小和圓圈一樣的白色元素，并將其位置定位到了圓圈圓心的位置。然后，我們給這個(gè)元素設(shè)置了名為“circle”的動(dòng)畫(huà)，并將其無(wú)限循環(huán)。這樣，我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的CSS3動(dòng)畫(huà)圓圈啦！