CSS3 是一種能夠實現豐富效果的前端技術，在這里我們來學習如何使用 CSS3 來實現畫風車的效果。

.windmill {
width: 200px;
height: 200px;
position: relative;
border-radius: 50%;
background-color: #78AB46;
box-shadow: inset 0 0 10px #547B23;
}
.blade {
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100px;
background-color: #FFF;
border-radius: 10px;
transform-origin: bottom;
animation: rotate-blade 1s linear infinite;
}
.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-blade {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

首先我們創建一個寬高相等的圓形元素，并描繪出風車的樣式。我們使用了圓角、背景顏色和投影等 CSS 屬性來讓它看起來更加真實。接著，我們來定義風車的四個葉片的樣式。我們把它們都絕對定位在風車的頂端，并使用了 transform-origin 和 transform 屬性來讓它們始終旋轉并圍繞它們各自的中心旋轉。最后，我們使用了 @keyframes 關鍵字來定義一個旋轉動畫。

這就是我們完成風車效果所需要的所有代碼了！