网站地图    收藏   

主页 > 前端 > svg >

结合css3中animate动画绘制svg路径动画

来源:未知    时间:2018-02-02 11:15 作者:小飞侠 阅读:

[导读] 结合css3中animate动画绘制svg路径动画 效果: 源码: !DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlemetaname=viewportcontent=width=device-width,minimum-scale=1.0,maximum-scale=1.0/stylesvg{fill:none;stroke-dashar...

结合css3中animate动画绘制svg路径动画

效果:

image.png


预览:http://res.zixuephp.com/demo/svg/1/index1.html


源码:

<!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />    
<style>    
svg{ fill:none;  stroke-dasharray:1300; stroke-width: 2px;}    
#svg_2{}    
#svg_1{ stroke: #000; stroke-dasharray:5,5;  opacity:0;  animation: textChange 1s ease-out 1 forwards;}    
#svg_3{ stroke-width: 5px; stroke:#ff7700; stroke-dashoffset:1; animation: lineMove 2s ease infinite forwards;  }    
#svg_4{stroke-width: 2px; stroke:#000; animation: lineMove2 2s ease-out 0.5s infinite forwards; opacity:0;  }    
@keyframes lineMove {    
0%{    
stroke-dasharray: 0,5;    
}    
100%{    
stroke-dasharray:5,10;    
}    
}    
@keyframes lineMove2 {    
0%{    
opacity:0;    
stroke-dasharray: 0, 1300;    
}    
100%{    
opacity:1;    
stroke-dasharray:1300, 2600;    
}    
}    
@keyframes textChange {    
0%{    
opacity:0;    
stroke-opacity: 0;    
}    
100%{    
opacity:1;    
stroke-opacity: 1;    
}    
}    
</style>    
</head>    
<body>    
<div class="svgbox">    
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">    
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->    
<g>    
<ellipse ry="20" rx="123" id="svg_1" cy="193.289165" cx="288.5" />    
<ellipse ry="101" rx="183" id="svg_3" cy="193.289165" cx="288.5" />    
<ellipse ry="69" rx="154" id="svg_4" cy="197.289165" cx="288.5" />    
<text stroke="#000" transform="matrix(3.248901844024658,0,0,3.248901844024658,-502.6295621395111,-236.1346936225891) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_2" y="140.016449" x="206.157134" stroke-width="0" fill="#d34141">locojoy</text>    
</g>    
</svg>    
</div>    
</body>    
</html>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论