国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

SVG做圓環進度

Elle / 3360人閱讀

摘要:哈哈動態效果是用來實現的,,至于進度則是用控制屬性實現的。。代碼如下首先看下結構加油開始濾鏡效果對于不熟悉的,先看下基本教程接下來看下樣式最后就腳本了,代碼不多,也很簡單,就是設置屬性圓環進度條謝謝關注

我們要實現的效果:

是不是有點感覺。。。哈哈

動態效果是用css3來實現的,,至于進度則是用js控制stroke-dasharray屬性實現的。。

代碼如下:

首先看下HTML結構

1143/1566 加油開始 99%

濾鏡效果


    
        
        
            
            
        
    

對于svg不熟悉的,先看下SVG基本教程http://www.runoob.com/svg/svg...

接下來看下CSS樣式

.zh-rt-main{position: relative; width: 436px; height: 436px; margin: -36px auto 0;}
.zh-rt-main .zh-node{display: block; position: absolute; z-index: 2; width: 116px; font-size: 12px; text-align: center; opacity: 0;}
.zh-rt-main .zh-node:after{content: ""; display: block; width: 100%; height: 1px; margin-top: 5px;}
.zh-rt-main .zh-node .zh-name,
.zh-rt-main .zh-node .zh-percent-num{display: block;}
.zh-rt-main .zh-node-1{left: 160px; top: 40px; -webkit-animation: fadeIn .3s ease-out .1s forwards; animation: fadeIn .3s ease-out .1s forwards;}
.zh-rt-main .zh-node-2{right: 70px; top: 82px; -webkit-animation: fadeIn .3s ease-out .2s forwards; animation: fadeIn .3s ease-out .2s forwards;}
.zh-rt-main .zh-node-3{right: 20px; top: 138px; -webkit-animation: fadeIn .3s ease-out .3s forwards; animation: fadeIn .3s ease-out .3s forwards;}
.zh-rt-main .zh-node-4{right: 0; top: 195px; -webkit-animation: fadeIn .3s ease-out .4s forwards; animation: fadeIn .3s ease-out .4s forwards;}
.zh-rt-main .zh-node-5{right: 20px; bottom: 135px; -webkit-animation: fadeIn .3s ease-out .5s forwards; animation: fadeIn .3s ease-out .5s forwards;}
.zh-rt-main .zh-node-6{right: 70px; bottom: 75px; -webkit-animation: fadeIn .3s ease-out .6s forwards; animation: fadeIn .3s ease-out .6s forwards;}
.zh-rt-main .zh-node-7{left: 160px; bottom: 31px; -webkit-animation: fadeIn .3s ease-out .7s forwards; animation: fadeIn .3s ease-out .7s forwards;}
.zh-rt-main .zh-node-8{left: 70px; bottom: 75px; -webkit-animation: fadeIn .3s ease-out .9s forwards; animation: fadeIn .3s ease-out .9s forwards;}
.zh-rt-main .zh-node-9{left: 20px; bottom: 135px; -webkit-animation: fadeIn .3s ease-out .8s forwards; animation: fadeIn .3s ease-out .8s forwards;}
.zh-rt-main .zh-node-10{left: 0; top: 195px; -webkit-animation: fadeIn .3s ease-out 1s forwards; animation: fadeIn .3s ease-out 1s forwards;}
.zh-rt-main .zh-node-11{left: 20px; top: 138px; -webkit-animation: fadeIn .3s ease-out 1.1s forwards; animation: fadeIn .3s ease-out 1.1s forwards;}
.zh-rt-main .zh-node-12{left: 70px; top: 82px; -webkit-animation: fadeIn .3s ease-out 1.2s forwards; animation: fadeIn .3s ease-out 1.2s forwards;}

最后就JS腳本了,代碼不多,也很簡單,就是設置stroke-dasharray屬性

// 圓環進度條
function ringProcessBar() {
    var radius = 120;
    var circumference = 2 * radius * Math.PI;
    $(".zh-rt-main").each(function() {
        var curProcess = parseFloat($(this).find(".zh-svg-box .zh-percent").text()).toFixed(2) / 100;
        var dasharray1 = (circumference*(1-curProcess)).toFixed(2);
        var dasharray2 = (circumference*curProcess).toFixed(2);
        $(this).find(".zh-svg-box svg circle:eq(1)").attr("stroke-dasharray", dasharray2+","+dasharray1);
    });
}
ringProcessBar();

謝謝關注~

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81668.html

相關文章

  • 實現環形進度條的幾種方法

    摘要:環形進度條的問題,網上有很多的,也有各種不同的實現方式,很棒的實現也有很多,我這自己做一下一方面是想開闊一下自己的思路,一方面好久沒看和的東西了,基礎的拿來熟悉下。 環形進度條的問題,網上有很多的demo,也有各種不同的實現方式,很棒的實現也有很多,我這自己做一下一方面是想開闊一下自己的思路,一方面好久沒看SVG和Canvas的東西了,基礎的拿來熟悉下。 DIV + CSS3 這個是最...

    Scliang 評論0 收藏0
  • clip實現圓環進度

    摘要:效果圖怎么實現這樣一個圓環進度條的效果呢,可以使用等等方式,今天我們來說下使用怎么來實現。使用才實現圓環進度還是很簡單的,還不需要考慮兼容性,關于可以看張鑫旭大神的日志 效果圖 showImg(https://segmentfault.com/img/bV3DbY?w=315&h=300); 怎么實現這樣一個圓環進度條的效果呢,可以使用canvas、svg、GIF等等方式,今天我們來說...

    zhichangterry 評論0 收藏0
  • clip實現圓環進度

    摘要:效果圖怎么實現這樣一個圓環進度條的效果呢,可以使用等等方式,今天我們來說下使用怎么來實現。使用才實現圓環進度還是很簡單的,還不需要考慮兼容性,關于可以看張鑫旭大神的日志 效果圖 showImg(https://segmentfault.com/img/bV3DbY?w=315&h=300); 怎么實現這樣一個圓環進度條的效果呢,可以使用canvas、svg、GIF等等方式,今天我們來說...

    spacewander 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<