来源：未知 时间：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路径动画 效果：
预览：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
