我們要實現的效果:
是不是有點感覺。。。哈哈
動態效果是用css3來實現的,,至於進度則是用js控制stroke-dasharray屬性實現的。。
**如下:
首先看下html結構
1143/1566加油開始99%
濾鏡效果
對於svg不熟悉的,先看下svg基本教程
接下來看下css樣式
.zh-rt-main
.zh-rt-main .zh-node
.zh-rt-main .zh-node:after
.zh-rt-main .zh-node .zh-name,
.zh-rt-main .zh-node .zh-percent-num
.zh-rt-main .zh-node-1
.zh-rt-main .zh-node-2
.zh-rt-main .zh-node-3
.zh-rt-main .zh-node-4
.zh-rt-main .zh-node-5
.zh-rt-main .zh-node-6
.zh-rt-main .zh-node-7
.zh-rt-main .zh-node-8
.zh-rt-main .zh-node-9
.zh-rt-main .zh-node-10
.zh-rt-main .zh-node-11
.zh-rt-main .zh-node-12
最後就js指令碼了,**不多,也很簡單,就是設定stroke-dasharray屬性
// 圓環進度條
function ringprocessbar() );
}ringprocessbar();
謝謝關注~ 使用SVG實現圓環loading進度效果
當我們想實現這樣乙個loading效果,有這麼幾種選擇,第一種是使用canvas,第二種是借助css3的transform屬性。這兩種方法有乙個問題,在webkit核心的瀏覽器上存在毛邊。那麼如果只相容ie9 的瀏覽器,可以考慮使用svg svg的實現效果非常簡單 實現這個效果的關鍵因素在於stro...
使用svg畫圓環
專案中需要乙個圓形進度條,本著能省則省的原則,先去elementui上看了下,傻眼了,不一樣,ui直接否定了這個辦法。這個沒啥難點,cx,cy,r分別表示圓心 x,y 和半徑r,stroke width是圓的邊,stroke表示邊的顏色,fill表示整個圓的填充顏色。其實就是兩個同心圓,裡面的圓的邊...
圓環進度css
看效果先 參考 jquery圓環百分比進度條製作 css clip rect矩形剪裁功能及一些應用介紹 css clip rect幾個值含義示意例項頁面 clip rect下png通道透明下sprite定位例項頁面 clip rect剪裁效果預覽例項頁面 doctype html html lang...