CSS是前端開發者必不可少的一門技術，除了可以通過它美化網頁布局，還可以實現很多有趣的動畫效果。其中一個常見的動畫效果就是以圓心為中心旋轉，下面就讓我們來學習如何使用CSS制作這種動畫效果。

/* 首先，我們需要定義一個圓形的元素 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
/* 接著，我們定義一個 .rotate 類，用于控制元素的旋轉 */
.rotate {
animation: rotate 2s linear infinite;
}
/* 最后，我們定義一個 @keyframes 動畫，讓元素以圓心為中心旋轉 */
@keyframes rotate {
from {
transform: rotate(0deg); /* 初始角度為0 */
}
to {
transform: rotate(360deg); /* 最終角度為360度，即一周 */
}
}

上面的代碼中，我們先定義了一個圓形的元素，接著通過定義 .rotate 類來控制元素的旋轉，然后通過 @keyframes 動畫讓元素以圓心為中心旋轉。

使用起來也非常簡單，只需要給需要旋轉的元素添加 .rotate 類即可：

<div class="circle rotate"></div>

這樣，我們就實現了以圓心為中心旋轉的動畫效果。不僅如此，通過修改 @keyframes 中的參數，我們還可以實現許多其他的動畫效果，比如大小變化、位置偏移等。