U型进度条
?
今天同事說要做一個U型進度條的效果。
本打算上網找一個，結果找了一個純CSS3打造的，不過最坑人的是他把進度條從1到100，挨個設置了CSS屬性。
這不得活活累死寶寶~~~~~~~~~~~~~~。
于是我就用Less寫了一個簡單的，主要是封裝了循環，生成了100個屬性。封裝循環的代碼如下
@angle: 3.6deg; .loop(@counter) when (@counter < 100) {.loop((@counter + 1)); // 遞歸調用自身.progress-@{counter} {background-image: linear-gradient(90deg, #5d6771 50%, transparent 50%, transparent), linear-gradient(@angle*@counter+90deg, #fffde8 50%, #5d6771 50%, #5d6771);&:before{transform: rotate(@angle*@counter) translate(0, -72.5px);}b:after{content: "@{counter}%";}} } .loop(0); // 調用循環這樣就生成了100個屬性。完整例子參考：點擊我
然后這個less這種做完了，想到用js+h5，也可以做一個類似的。
主要是用canvas的畫筆，畫曲線。并且把方法進行了封裝。
代碼很簡單，就是定義路徑，定義畫筆，畫曲線，保存，生成圖中心文字
完整例子參考：點擊我
?
轉載于:https://www.cnblogs.com/chenxygx/p/5001969.html
總結
