CSS園圈動(dòng)畫是一種常見的CSS動(dòng)畫效果，通過CSS的動(dòng)畫屬性實(shí)現(xiàn)。這種效果可以讓一個(gè)園圈逐漸變大或者逐漸變小，并且讓園圈的顏色不斷變化或者漸變。下面我們來看一下實(shí)現(xiàn)這種效果的具體代碼：

/*定義一個(gè)圓*/
.circle {
width: 100px;  
height: 100px;  
border-radius: 50%; 
background-color: #92a8d1;
}
/*定義一個(gè)動(dòng)畫*/
@keyframes circleAnimation {
0% {
width: 50px;  /*初始大小*/
height: 50px;
background-color: #92a8d1;
}
50% {
width: 100px;  /*放大到最大，顏色變化*/
height: 100px;
background-color: #b5d5ff;
}
100% {
width: 50px;  /*回到原始大小，顏色變化*/
height: 50px;
background-color: #92a8d1;
}
}
/*運(yùn)用動(dòng)畫*/
.circle {
animation-name: circleAnimation;  /*規(guī)定動(dòng)畫名稱*/
animation-duration: 3s;  /*動(dòng)畫的時(shí)間*/
animation-iteration-count: infinite; /*動(dòng)畫的循環(huán)次數(shù)*/
}

在上面的代碼中，我們首先定義了一個(gè).circle類，它代表的是一個(gè)園圈，并且給它設(shè)置了初始的大小和顏色。然后我們定義了一個(gè)名為circleAnimation的動(dòng)畫，它有三個(gè)關(guān)鍵幀，并且在50%的時(shí)候讓圓變大并且改變顏色，在100%的時(shí)候讓圓回到原始大小，并且還原到原始的顏色。接著我們使用animation-name、animation-duration和animation-iteration-count規(guī)定了這個(gè)動(dòng)畫的名稱、持續(xù)時(shí)間和循環(huán)次數(shù)，最后讓.circle類應(yīng)用這個(gè)動(dòng)畫，這樣就完成了CSS園圈動(dòng)畫效果的實(shí)現(xiàn)。