CSS3 簡筆畫動畫

.box {
width: 300px;
height: 300px;
background-color: #ccc;
position: relative;
}
.circle {
width: 100px;
height: 100px;
background-color: #26A69A;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rotate 5s infinite linear;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}

以上是一個簡單的例子，演示了如何使用 CSS3 和簡單的 HTML 結構來創建一個圓形動畫效果。

首先，我們需要一個外層容器，這里使用了一個 div 元素，并設置了其寬和高。

接著，我們創建了一個名為 circle 的 div 元素，并設置其樣式。

其中，我們使用了 border-radius 屬性來將其樣式設置為圓形，使用了 position 屬性來讓它在外層容器內具有絕對定位，使用了 transform 屬性來設置其位置，并使用 animation 屬性來設置動畫。

最后，我們定義了名為 rotate 的關鍵幀動畫，讓這個圓形以固定速度無限旋轉。

這個例子雖然簡單，但展示了 CSS3 動畫的基本用法和原理。以此為基礎，我們可以創建出更加復雜的動畫效果。