3-5 形状篇 圆饼图

知识储备

1.svg 去W3School学习学习

http://www.w3school.com.cn/svg/svg_circle.asp

小测试

示例代码1
html

10

css

.pie{   
   width: 100px; 
   height: 100px;  
   border-radius: 50%; 
   background: yellowgreen;    
   background-image: linear-gradient(90deg, transparent 50%,#655 0);
}

.pie::before{  
   content: ''; 
   display: block; 
   margin-left: 50%;   
   height: 100%;  
   background-color: inherit;  
   transform-origin: 0 50%;  
   border-radius: 0 100% 100% 0 / 50%;   
   /*transform: rotate(.5turn);*/  
   animation: spin 50s linear infinite,bg 100s step-end infinite; 
   animation-play-state: paused;   
   animation-delay: inherit;
}

这一节我们需要引入JS来更好的实现代码额可用性
js

---

svg解法

html

90

css

svg{    
  width: 300px; 
  height: 300px; 
  transform: rotate(-90deg);    
  background: yellowgreen;  
  border-radius: 50%;
}

circle{  
  fill: yellowgreen;  
  stroke: #655; 
  stroke-width: 32; 
  stroke-dasharray: 50 100;  
  /*animation: fillup 5s linear infinite;*/
}

js

效果图：

圆饼图