CSS3 動畫 圓圈是一種很常見的動畫效果，它可以讓頁面更加生動有趣。下面我們來學(xué)習(xí)如何實(shí)現(xiàn)一個(gè)基礎(chǔ)的 CSS3 動畫 圓圈。

.circle {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
animation: circle 2s infinite;
}
@keyframes circle {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(2);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}

上面的代碼中，我們給一個(gè) div 添加了一個(gè) .circle 的類，然后定義了它的寬高為 50px，設(shè)置了圓形的邊框半徑，背景顏色設(shè)置為紅色，最后啟用一個(gè)名為 circle 的動畫，時(shí)間為 2s，循環(huán)無限次。

接著，我們利用 @keyframes 定義了這個(gè)動畫，將其分成了 0%、50%、100% 三個(gè)階段。0% 階段表示初始狀態(tài)，50% 階段表示中間狀態(tài)，100% 階段表示結(jié)束狀態(tài)。

在 0% 階段中，我們設(shè)置了 transform 和 opacity，表示在初始狀態(tài)下它的大小和透明度都是正常的。在 50% 階段中，我們將其大小設(shè)置為原來的兩倍，透明度為 0.5。在 100% 階段中，又恢復(fù)到原來的大小和透明度。

這樣，我們就完成了一個(gè)簡單的 CSS3 動畫 圓圈效果。