風車代碼 CSS

.windmill {
height: 120px;
width: 120px;
position: relative;
overflow: hidden;
}
.blade {
height: 120px;
width: 120px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
transform-origin: right center;
animation: rotate 4s linear infinite;
}
.blade1 {
background-color: #F44336; 
transform: rotate(0deg);
animation-delay: 0s;
}
.blade2 {
background-color: #4CAF50;
transform: rotate(120deg);
animation-delay: 0.5s;
}
.blade3 {
background-color: #2196F3;
transform: rotate(240deg);
animation-delay: 1s;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

以上是風車代碼 CSS，通過 CSS 動畫和 transform 實現旋轉效果，風車的葉子用 border-radius 實現圓角。CSS 動畫可以控制每條葉子的延遲和旋轉速度，從而形成流暢和自然的效果。