纯css3制作旋转饼状图

 

html:

<div class=”pie”></div>

 

css:

@keyframes spin {
to{transform:rotate(.5turn);}
}
@keyframes bg {
50%{background: #655;}
}
.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;margin-left: 50%;height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin:left;
animation: spin 3s linear infinite,
bg 6s step-end infinite;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注