css扇面制作
CSS扇面制作方法
使用CSS的transform和rotate属性可以创建扇面效果。以下是一个简单的实现方式：
<div class="fan">
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
</div>.fan {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}
.slice {
position: absolute;
width: 100px;
height: 100px;
background: #f06;
border-radius: 0 100% 0 0;
transform-origin: bottom right;
}
.slice:nth-child(1) { transform: rotate(0deg); }
.slice:nth-child(2) { transform: rotate(72deg); }
.slice:nth-child(3) { transform: rotate(144deg); }
.slice:nth-child(4) { transform: rotate(216deg); }
.slice:nth-child(5) { transform: rotate(288deg); }动态调整扇面角度
通过CSS变量可以更方便地调整扇面的角度和数量：
.fan {
--slices: 5;
--angle: calc(360deg / var(--slices));
}
.slice {
transform: rotate(calc(var(--angle) * var(--n)));
}
.slice:nth-child(1) { --n: 0; }
.slice:nth-child(2) { --n: 1; }
.slice:nth-child(3) { --n: 2; }
.slice:nth-child(4) { --n: 3; }
.slice:nth-child(5) { --n: 4; }添加动画效果
使用CSS动画让扇面旋转：
.fan {
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}响应式扇面设计
通过媒体查询调整扇面大小：
@media (max-width: 600px) {
.fan {
width: 150px;
height: 150px;
}
.slice {
width: 75px;
height: 75px;
}
}这些方法可以组合使用，创建各种不同样式和效果的CSS扇面。
