CSS3制作旋转饼状图

CSS3制作旋转饼状图

html:

<div class="pie"></div>

css:

*{
margin: 0;
padding: 0;
}
.pie{
width: 200px;
height: 200px;
background-color: yellowgreen;
margin: 50px auto;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%, #655 0);
box-shadow: 25px 0 25px -25px black,
-25px 0 25px -25px black;
}
.pie::before{
content: '';
display: block;
height: 100%;
margin-left: 50%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite,
bg 6s step-end infinite;
}
@keyframes spin{
from{
transform: rotate(0turn);
}
to{
transform: rotate(0.5turn);
}
}
@keyframes bg{
0%{
background: yellowgreen;
}
50%{
background-color: #655;
}
}