简易饼图
?> 背景知识：
gradient, animation, SVG
<script v-pre type="text/x-template" id="pie-chart">
<style>
main{
width: 100%;
padding: 60px 0;
}
.chart{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin-bottom: 29px;
}
.chart > p{
width: 199px;
}
.chart > div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #E8E2D6;
background-image: linear-gradient(to right, transparent 50%, #b4a078 0);
}
.chart:nth-of-type(1) div::before {
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background-color: inherit;
transform-origin: 0 50%;
transform: rotate(.3turn);
}
.chart:nth-of-type(2) div::before{
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background-color: inherit;
transform-origin: 0 50%;
animation: pie-chart-spin1 3s linear 1.6 forwards,
pie-chart-bg1 3s step-end 1 forwards;
}
.chart:nth-of-type(3) > div::before{
content: "";
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 0 50% 50% 0;
background-color: inherit;
transform-origin: 0 50%;
animation: pie-chart-spin1 3s linear 1.6 forwards,
pie-chart-bg1 3s step-end 1 forwards;
}
.chart:nth-of-type(3) > div::before{
animation-delay: -1.5s;
}
svg{
width: 100px; height: 100px;
transform: rotate(-90deg);
background: #E8E2D6;
border-radius: 50%;
}
.chart:nth-of-type(4) svg > circle{
fill: #E8E2D6;
stroke: #b4a078;
stroke-width: 32;
stroke-dasharray: 0 100;
animation: pie-chart-fillup 6s linear infinite;
}
.chart:nth-of-type(5) svg > circle:nth-of-type(1){
fill: #fff;
stroke: #b4a078;
stroke-width: 32;
stroke-dasharray: 0 100; /* 36% */
stroke-dashoffset: -64;
animation: pie-chart-per1 2s linear 1 forwards;
}
.chart:nth-of-type(5) svg > circle:nth-of-type(2){
fill: transparent;
stroke: #cabca0;
stroke-width: 32;
stroke-dasharray: 0 100; /* 32% */
stroke-dashoffset: -32;
animation: pie-chart-per2 2s linear 1 forwards;
}
.chart:nth-of-type(5) svg > circle:nth-of-type(3){
fill: transparent;
stroke: #e1d9c9;
stroke-width: 32;
stroke-dasharray: 0 100; /* 32% */
stroke-dashoffset: 0;
animation: pie-chart-per3 2s linear 1 forwards;
}
@keyframes pie-chart-spin1 {
to { transform: rotate(.5turn); }
}
@keyframes pie-chart-bg1 {
to { background: #b4a078; }
}
@keyframes pie-chart-spin2 {
to { transform: rotate(.5turn); }
}
@keyframes pie-chart-bg2 {
50% { background: #b4a078; }
}
@keyframes pie-chart-fillup{
to { stroke-dasharray: 100 100; }
}
@keyframes pie-chart-per1{
to { stroke-dasharray: 37 100; }
}
@keyframes pie-chart-per2{
to { stroke-dasharray: 32 100; }
}
@keyframes pie-chart-per3{
to { stroke-dasharray: 32 100; }
}
</style>
<script>
</script>
</script>
浏览器支持
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-gradients&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>
<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=svg&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="458px"></iframe>
