码迷,mamicode.com
首页 > 其他好文 > 详细

SVG酷炫描边

时间:2016-10-24 20:15:52      阅读:429      评论:0      收藏:0      [点我收藏+]

标签:head   type   anim   abs   offset   bsp   das   interval   title   

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">


        html,body{
            width: 100%;
            height:100%;
            margin:0;
            padding:0;
            background-color: #e7e7e7;
        }

    </style>
</head>
<body>
    <svg width="300" height="300" viewBox="0 0 300 300" id="svg" xmlns="http://www.w3.org/2000/svg" style="margin-left:200px;margin-top:100px" >
    
        
    </svg>
    <div style="position: absolute;width: 292px;height:288px;overflow: hidden;top:104px;left:204px;">
         <img src="http://f.hiphotos.baidu.com/zhidao/pic/item/d833c895d143ad4b4c7b3e3180025aafa50f06ed.jpg" height="292px">
    </div>
</body>
</html>
<script src="https://cdn.bootcss.com/snap.svg/0.4.1/snap.svg.js"></script>

<script type="text/javascript">
    var strokeWidth=4;
    var width=300;

    var svg = Snap("#svg");


     var rect = svg.paper.rect(strokeWidth/2,strokeWidth/2,width-strokeWidth,width/2-strokeWidth).attr({
        strokeWidth:""+strokeWidth,
        stroke:"#FF1687",
        fill:"none",
        strokeLinecap:"round",
        
        strokeDasharray:width-strokeWidth*3+" "+(width*3-width+strokeWidth*3),
        strokeDashoffset:(width+strokeWidth)*1.5+""
    }),
        rect2 = svg.paper.rect(strokeWidth/2,width/2-strokeWidth/2,width-strokeWidth,width/2-strokeWidth).attr({
        strokeWidth:""+strokeWidth,
        strokeLinecap:"round",
        
        stroke:"#FF1687",
        fill:"none",
        strokeDasharray:width-strokeWidth*3+" "+(width*3-width+strokeWidth*3),
        strokeDashoffset:-strokeWidth+""
    });

    function animate(){
        rect.attr("strokeDashoffset",(width+strokeWidth)*1.5+"");
        rect2.attr("strokeDashoffset",-strokeWidth+"");
        
    rect.animate({strokeDashoffset:-width/2},500,mina.easein,function(){
        rect.animate({strokeDashoffset:-width/2-width/5},1500,function(){
            rect.animate({strokeDashoffset:-width*1.5+strokeWidth},500);
        });
    });

    rect2.animate({strokeDashoffset:-width*2-strokeWidth*2},500,mina.easein,function(){
        rect2.animate({strokeDashoffset:-width*2-width/5},1500,function(){
            rect2.animate({strokeDashoffset:-width*3-strokeWidth},500);
        });
    });
}
    window.onload=function(){
        animate();
        setInterval(animate,3200);
    };

</script>

SVG酷炫描边

标签:head   type   anim   abs   offset   bsp   das   interval   title   

原文地址:http://www.cnblogs.com/fanjun/p/5994091.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!