CSS3是一種用于顯示網頁樣式的技術，它可以讓我們實現許多漂亮而復雜的效果。其中一種效果就是畫風車。下面我們來學習如何用CSS3畫一個風車。

/* 定義一個畫風車的div */
div.windmill {
width: 100px;
height: 100px;
background-color: #ffbf00; /* 顏色為黃色 */
border-radius: 50%; /* 將邊角設為50% */
position: relative;
overflow: hidden;
}
/* 定義風車中心的div */
div.windmill::before {
content: "";
width: 30%;
height: 30%;
background-color: #fff; /* 顏色為白色 */
position: absolute;
top: 35%;
left: 35%;
border-radius: 50%;
}
/* 定義風車的葉片 */
div.windmill::after {
content: "";
width: 90%;
height: 10%;
background-color: #fff; /* 顏色為白色 */
position: absolute;
top: 45%;
left: 5%;
border-radius: 5%;
transform-origin: 100% 50%; /* 將變換的原點設為最右邊的點 */
animation: rotate 2s linear infinite; /* 旋轉動畫，持續時間為2秒，直線運動，無限循環 */
}
/* 定義旋轉動畫 */
@keyframes rotate {
0% {
transform: rotate(0deg); /* 起始角度為0度 */
}
100% {
transform: rotate(360deg); /* 終止角度為360度 */
}
}

以上就是CSS3畫風車的代碼，通過上述代碼可以實現一個黃色的圓形div作為風車本身，白色的圓形div作為風車中心，以及白色的矩形div作為風車的葉片。我們還使用了transform屬性來定義旋轉動畫，在動畫中，風車葉片的角度從0度逐漸增加到360度，就形成了風車的旋轉效果。