CSS是網頁設計中不可或缺的一部分，它通過美觀的視覺效果來吸引用戶。本文將帶您通過CSS的制作方式來實現圓圈上下旋轉效果。

首先，我們創建一個類名為“circle”的div元素，來實現圓圈的效果。它的寬度和高度都設為100px，在css中通過“border-radius:50%”屬性設置元素的圓角值為50%來讓它變為圓形，同時通過“background-color”屬性來為圓形添加顏色。

然后，我們通過“animation”屬性來使用關鍵幀動畫實現圓圈的上下旋轉。我們為動畫起了一個名字叫“rotate”，設置了1秒的旋轉時間、無限重復、線性過渡。

接下來，我們在關鍵幀動畫“rotate”中設置了兩個狀態，0%和100%。在初始狀態（0%），我們使用“transform: rotateX(0)”將元素旋轉到0度，然后在結束狀態（100%）中使用“transform: rotateX(360deg)”將元素旋轉到360度。這樣，在動畫進行1秒的時間后，元素就會完成一個上下旋轉的循環效果。

以上就是本文介紹的圓圈上下旋轉的制作方法，希望對您有所幫助。