CSS是一種用于網頁樣式和布局的編程語言。使用CSS，我們可以改變文本的顏色和字體、調整圖片的大小和位置，并創建漂亮的效果和動畫。在本文中，我們將學習如何使用CSS制作一個簡單的風車動畫。

.windmill {
width: 150px;
height: 150px;
margin: 50px auto;
position: relative;
}
.blade {
background-color: #f8dc4c;
width: 100px;
height: 10px;
position: absolute;
top: 70px;
left: 25px;
transform-origin: 0% 50%;
animation: rotate 2s infinite linear;
}
.blade:nth-child(1) {
transform: rotate(0deg);
}
.blade:nth-child(2) {
transform: rotate(90deg);
}
.blade:nth-child(3) {
transform: rotate(180deg);
}
.blade:nth-child(4) {
transform: rotate(270deg);
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

首先，我們用.windmill類定義風車的尺寸和位置。接下來，我們用.blade類定義風車的每個葉片的樣式。每個葉片都采用position: absolute絕對定位的方式布局，并通過transform-origin設置旋轉中心點為葉片的左側（0%）中心點（50%）。我們通過animation屬性來添加旋轉動畫效果，并持續旋轉兩秒鐘。我們同時定義了每個葉片在不同角度的旋轉方向和角度。

最后，我們使用@keyframes定義了旋轉動畫的關鍵幀，即從0%到100%時間區間的transform的初始角度和結束角度，告訴瀏覽器應該如何執行動畫。這樣，我們就可以輕松地制作一個漂亮的CSS風車動畫了！