CSS折扇是一種通過HTML和CSS代碼實現的有趣動畫效果。

首先，我們需要定義一個父容器和若干子容器，每個子容器分別代表扇葉。

<div class="fan">
<div class="leaf leaf1"></div>
<div class="leaf leaf2"></div>
...
<div class="leaf leafN"></div>
</div>

接下來，我們需要使用CSS代碼為每個扇葉設置旋轉角度和延遲，使它們形成一個逐漸展開的效果。

.fan {
width: 300px;
height: 300px;
position: relative;
}
.leaf {
width: 0;
height: 100%;
position: absolute;
transform-origin: left center;
animation-name: open;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.leaf1 {
animation-delay: 0s;
}
.leaf2 {
animation-delay: 0.3s;
}
...
.leafN {
animation-delay: (N-1)*0.3s;
}
@keyframes open {
from {
transform: rotate(0deg);
width: 0%;
}
to {
transform: rotate(180deg);
width: 100%;
}
}

以上代碼將實現一個由左向右展開的扇形效果。如果想要實現其他方向或者更多扇葉的效果，可以適當調整旋轉角度、延遲時間以及扇葉個數。

CSS折扇是一個簡單而有趣的動畫效果，可以應用在多種場景中，比如加載動畫、頁面交互等。掌握這個技巧，可以讓你的網頁更加生動有趣。