Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

stroke-dasharray：定义描边的虚线长度，如果提供奇数个，则会自动复制该值成偶数

stroke-dashoffset：定义虚线描边的偏移量（在路径开始的前面，看不到）

实现如下所示

svg{ transform:rotate(-90deg); } 
@keyframes rt{
     to{
        stroke-dashoffset:0;
    } 
}


<circle class="a" cx="300" cy="300" r="150" style="fill:transparent;stroke:#000;stroke-width:3px;" />
<circle class="a" cx="300" cy="300" r="150" style="fill:transparent;stroke:red;stroke-width:4px;stroke-dasharray:942.4777px; stroke-dashoffset:942.4777px; animation:rt 2s ease-in both " />

原理就是设置stroke-dasharray和stroke-dashoffset一样大的数值，为圆形的周长

posted @ 2016-11-16 15:43  SniffRose  阅读(6599)  评论(0)  编辑  收藏  举报