<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html,body{
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; 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>