實例：純CSS3實現(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);}

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

改變rotate的角度就可以實現(xiàn)不同大小的餅狀圖效果，但是親手試驗的讀者會發(fā)現(xiàn)，旋轉(zhuǎn)50%以上并不能呈現(xiàn)出理想的效果，而是會呈現(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;}}

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

本文完?