CSS是前端開發必經之路，在頁面設計中起到至關重要的作用。通過CSS的動畫效果，可以使頁面更加生動和有趣。接下來，我們將使用CSS來實現一個風扇轉動的動畫效果。

HTML代碼：
<div class="fan">
<div class="fan-blade blade1"></div>
<div class="fan-blade blade2"></div>
<div class="fan-blade blade3"></div>
<div class="fan-blade blade4"></div>
</div>
CSS代碼：
.fan {
position: relative;
width: 150px;
height: 150px;
background-color: #ccc;
border-radius: 50%;
margin: 50px auto;
animation: spin 2s linear infinite;
}
.fan-blade {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 10px;
background-color: #333;
transform-origin: 0 50%;
animation: blade-spin 2s linear infinite;
}
.blade1 {
transform: rotate(0deg);
}
.blade2 {
transform: rotate(90deg);
}
.blade3 {
transform: rotate(180deg);
}
.blade4 {
transform: rotate(270deg);
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@keyframes blade-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

通過HTML，我們創建了一個`div`容器，并在其中添加了四個子元素，它們就是風扇的葉片。接下來，通過CSS對容器本身以及葉片進行樣式的設置。容器通過`border-radius`屬性控制邊框，`animation`屬性控制旋轉的動畫效果；葉片則需要使用到CSS3中的`transform`屬性，通過給其添加不同的`rotate`值實現轉動不同的角度。

通過以上代碼和樣式設置，就可以實現一個非常簡單但足夠有趣的動畫效果。如果您也想嘗試通過CSS實現更多的有趣效果，那么就讓我們一起來探索吧！