1. 程式人生 > >用css制作圓環圖表 (vue,sass)

用css制作圓環圖表 (vue,sass)

one .cn col eight 技術分享 style log app 部分

效果圖:

技術分享

思路 :在一個容器裏再放兩個矩形,每個矩形都占一半,給這兩個矩形都設置溢出隱藏,當去旋轉矩形裏面的圓形的時候,溢出部分就被隱藏掉了,這樣就可以達到想要的效果。

代碼-html:

技術分享

代碼-css:

技術分享

技術分享

代碼-js:

技術分享

註:.wrapper 的overflow:hidden; 起著關鍵性作用

用css制作圓環圖表 (vue,sass)