在CSS中，我們可以使用動(dòng)畫效果來使網(wǎng)頁更加生動(dòng)、有趣。其中一種很常見的動(dòng)畫效果是讓一個(gè)圓的直徑不斷增加，這可以通過CSS中的animation屬性輕松實(shí)現(xiàn)。

/* 設(shè)置圓的樣式 */
.circle{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
}
/* 設(shè)置動(dòng)畫效果 */
@keyframes circle-grow {
from {
width: 50px;
height: 50px;
}
to {
width: 100px;
height: 100px;
}
}
/* 應(yīng)用動(dòng)畫效果 */
.circle{
animation-name: circle-grow;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

上述代碼中，我們首先定義了一個(gè)類名為“circle”的元素，通過設(shè)置寬度、高度、邊框半徑和背景色，實(shí)現(xiàn)了一個(gè)簡單的紅色圓。接下來，在CSS中使用@keyframes關(guān)鍵字定義了一個(gè)名為“circle-grow”的動(dòng)畫效果，其中from表示動(dòng)畫開始時(shí)，圓的寬度和高度為50px，to表示動(dòng)畫結(jié)束時(shí)，圓的寬度和高度變成了100px。

最后，我們將定義好的動(dòng)畫效果應(yīng)用到類名為“circle”的元素上，通過設(shè)置animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction等屬性，實(shí)現(xiàn)了讓圓的直徑不斷增加的效果。