在Web開發中，我們經常會用到CSS中的動畫效果來增強頁面的交互性和視覺效果。其中，元素的旋轉效果通常能夠讓頁面更加生動，下面我們就來學習如何使用CSS實現風車旋轉360度的效果。

.wheel {
width: 100px;
height: 100px;
position: relative;
animation: spin 2s infinite linear;
}
.wheel:before {
content: "";
display: block;
background-color: #0066CC;
width: 60%;
height: 60%;
border-radius: 50% 50% 0 0;
position: absolute;
bottom: 0;
left: 20%;
}
.wheel:after {
content: "";
display: block;
background-color: #EEE;
width: 45%;
height: 45%;
border-radius: 50%;
position: absolute;
top: 25%;
left: 25%;
}
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

首先，我們為風車設計一個類名為“wheel”的元素，給它設置寬和高，并設置相對定位。然后我們定義了兩個偽元素:before和:after，分別作為風車葉片和軸心。在偽元素中，我們使用了一些CSS技巧來讓前者看起來像是一個等角風車葉片，后者則是風車的軸心。

接下來，我們使用@keyframes關鍵字定義一個名為“spin”的動畫序列。在序列中，我們從旋轉0度到旋轉360度。最后，我們將我們定義的動畫序列應用到我們的“wheel”元素中，并設置它無限循環，直到頁面被關閉。

這樣，在頁面加載后，我們的“wheel”元素就會開始360度旋轉，并持續不斷地旋轉。通過這個簡單的CSS代碼，我們可以輕松地實現一個風車旋轉的效果，讓頁面變得更加生動有趣。