我写了一条评论回复,但太长了:
嗯...好的,这里有一个第二个圆的示例
http://jsfiddle.net/LgtV2/....它有三个饼图部分。第一个圆(100%)有5个部分。你应该尝试使用这个示例来学习它是如何工作的,以便你可以复制它。我以前从未做过这个,只是看了San发布的链接,但看起来这只是使用多个Divs和css3 TRANSFORM形成曲线,并使用伪选择器:before和:after进行动画。动画发生在页面本身加载时...例如:当:before div1加载时,它具有5个转换,它加载并具有8个转换,:after加载时它具有11个转换。
代码:
<div class="half_pie">
<div class="half_part_pie_one half_bar_color half_percentage" data-percentage="35"></div>
<div class="half_part_pie_two"></div>
<div class="half_part_pie_three"></div> <span class="half_pie_icon iconfont-android"></span>
</div>
.full_percentage[data-percentage="100"] {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.full_percentage[data-percentage="95"] {
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
transform: rotate(170deg);
}
.full_percentage[data-percentage="90"] {
-webkit-transform: rotate(155deg);
-moz-transform: rotate(155deg);
-o-transform: rotate(155deg);
transform: rotate(155deg);
}
.full_percentage[data-percentage="85"] {
-webkit-transform: rotate(125deg);
-moz-transform: rotate(125deg);
-o-transform: rotate(125deg);
transform: rotate(125deg);
}
.full_percentage[data-percentage="80"] {
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
transform: rotate(110deg);
}
.full_percentage[data-percentage="75"] {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.full_percentage[data-percentage="70"] {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
.full_percentage[data-percentage="65"] {
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
transform: rotate(55deg);
}
.full_percentage[data-percentage="60"] {
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.full_percentage[data-percentage="55"] {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
.full_percentage[data-percentage="50"] {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.half_percentage[data-percentage="50"] {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.half_percentage[data-percentage="45"] {
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
transform: rotate(170deg);
}
.half_percentage[data-percentage="40"] {
-webkit-transform: rotate(155deg);
-moz-transform: rotate(155deg);
-o-transform: rotate(155deg);
transform: rotate(155deg);
}
.half_percentage[data-percentage="35"] {
-webkit-transform: rotate(125deg);
-moz-transform: rotate(125deg);
-o-transform: rotate(125deg);
transform: rotate(125deg);
}
.half_percentage[data-percentage="30"] {
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
transform: rotate(110deg);
}
.half_percentage[data-percentage="25"] {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.half_percentage[data-percentage="20"] {
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
transform: rotate(70deg);
}
.half_percentage[data-percentage="15"] {
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
transform: rotate(55deg);
}
.half_percentage[data-percentage="10"] {
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.half_percentage[data-percentage="5"] {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
.half_percentage[data-percentage="0"] {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.half_bar_color {
background: #3498db;
}
.half_pie {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
.half_pie:before {
content:'';
display: block;
position: absolute;
z-index: -1;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
.half_pie:after {
content:'';
display: block;
position: absolute;
z-index: 10;
width: 198px;
height: 198px;
top: 1px;
left: 1px;
-webkit-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
span.half_pie_icon {
position: absolute;
z-index: 5;
top: 25px;
left: 25px;
width: 150px;
height: 150px;
font-size: 3em;
line-height: 150px;
text-align: center;
color: #e0e0e0;
background: #fff;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
}
.half_part_pie_one {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 100px 200px 0px);
}
.half_part_pie_two {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 100px 200px 0px);
}
.half_part_pie_three {
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
background: #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
clip: rect(0px 200px 200px 100px);
-webkit-animation: half_third 4s linear;
-moz-animation: half_third 4s linear;
-o-animation: half_third 4s linear;
animation: half_third 4s linear;
opacity: 0;
}
@-webkit-keyframes half_third {
0% {
opacity: 1;
-webkit-transform: rotate(0deg);
}
100% {
opacity: 1;
-webkit-transform: rotate(180deg);
}
}
@-moz-keyframes half_third {
0% {
opacity: 1;
-moz-transform: rotate(0deg);
}
100% {
opacity: 1;
-moz-transform: rotate(180deg);
}
}
@-o-keyframes half_third {
0% {
opacity: 1;
-o-transform: rotate(0deg);
}
100% {
opacity: 1;
-o-transform: rotate(180deg);
}
}
@keyframes half_third {
0% {
opacity: 1;
transform: rotate(0deg);
}
100% {
opacity: 1;
transform: rotate(180deg);
}
}