SVG path animation 实践
无意间看到了别人用SVG做的动画,那逼格时相当,忍不住就研究起了SVG。
它和CSS3结合起来,简直把html页面当成了画板。由于笔者对于SVG也是初出茅庐,文章方面一定会存在很多不足之处,希望多多指正,共同进步。
好了,别多话就不多说了。先看下效果动图
啥,看不清,没感觉。好吧,那点击下这个链接,看下它的运行效果
https://jsfiddle.net/wsy6566/jvzo61w2/28/
刚了解SVG动画没几天,做的比较粗糙。主要原理就是应用css3的animation对
stroke-dashoffset,stroke-dasharray 属性进行渲染。
strokedasharray属性用于创建虚线,可以设置多个值,进行间隔设置。stroke-dashoffset则是设定位置。
css部分如下:
<style> #svg_dove { animation: goPoint 5s linear infinite; stroke-dashoffset: 14000; stroke-dasharray: 14000; stroke-width: 4; } #svg_12 { animation: goPoint 3s linear infinite; stroke-dashoffset: 1000; stroke-dasharray: 1300; stroke-width: 4; } @keyframes goPoint { to { stroke-dashoffset: 0; } } #dove_f { position: absolute; top: 0px; right: 0px; } </style>
仅此而已。html部分只是两个svg标签。
闲话就说到这里,让我们一起进入进阶的学习吧