[css] 使用css3画一个扇形
四个半圆叠加,过半调整 z-index
.container {
width: 200px;
height: 200px;
position: relative;
border-radius: 100%;
}
div {
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.fan-1,
.fan-3 {
background: #CC9999;
}
.fan-2,
.fan-4 {
background: white;
}
.fan-1,
.fan-2 {
border-radius: 100px 0 0 100px;
transform-origin: 100% 50%;
z-index: 2;
}
.fan-3,
.fan-4 {
z-index: 1;
left: 50%;
border-radius: 0 100px 100px 0;
transform-origin: 0% 50%;
}
.fan-4 {
animation: rotate-2 2s linear both infinite;
}</