實(shí)例：純CSS3實(shí)現(xiàn)餅狀圖

來源 |?http://www.fly63.com/article/detial/712

.pie {    width: 100px;    height: 100px;    border-radius: 50%;    background: yellowgreen;    background-image: linear-gradient(to right, transparent 50%, #655 0);}
.pie::before {    content: '';    display: block;    margin-left: 50%;    height: 100%;    border-radius: 0 100% 100% 0/50%;    background-color: inherit;    transform-origin: left;    transform: rotate(.2turn);}

實(shí)現(xiàn)效果如圖所示：?

改變r(jià)otate的角度就可以實(shí)現(xiàn)不同大小的餅狀圖效果，但是親手試驗(yàn)的讀者會(huì)發(fā)現(xiàn)，旋轉(zhuǎn)50%以上并不能呈現(xiàn)出理想的效果，而是會(huì)呈現(xiàn)出如下效果：?

.pie {    width: 100px;    height: 100px;    border-radius: 50%;    background: yellowgreen;    background-image: linear-gradient(to right, transparent 50%, #655 0);}
.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;}@keyframes spin{    to{transform: rotate(.5turn);}}@keyframes bg{    50%{background: #655;}}

讀者最好親手試驗(yàn)，嘗試修改其中的屬性，理解其中的意思，只有理解了才能做出更有趣的東西。如果讀者對svg感興趣的話，可以嘗試使用svg來實(shí)現(xiàn)餅狀圖，svg實(shí)現(xiàn)的效果要更加豐富多彩些。

本文完?

最后

• 歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧