不知道哪天看到的一个朋友圈里面有发的什么什么免费教签名之类的,就看了下SVG,做这功能还不错。

主要用到的几个属性,需要自行百度一下,不详说  stroke-dashoffset ,  stroke-dasharray 主要这两个。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="800" width="800">
<path d="m40.995594,214.000244c0,0 1.000015,0 2.000034,0c3.000053,0 7.000122,0 16.000282,0c9.00016,0 21.111244,0.704391 36.000641,-2.000031c13.127121,-2.384338 23.844788,-5.45723 35.00061,-9.000168c10.867096,-3.451233 23.077621,-6.812241 33.000595,-11.000183c9.07399,-3.829636 14.436508,-7.439819 21.000366,-13.000229c5.395462,-4.570648 8.579849,-11.157074 11.000198,-17.000305c2.567169,-6.197678 5.000092,-12.000214 5.000092,-20.000351c0,-4.000076 0,-9.000168 0,-13.000229c0,-4.000076 -0.613846,-8.297142 -3.000061,-11.000198c-1.479858,-1.676361 -1.823776,-4.486343 -4.000076,-5.000092c-0.973267,-0.229752 -3.000046,0 -5.000076,0c-4.000076,0 -7.291977,-1.101685 -13.000229,1.000015c-5.471954,2.014694 -11.593079,6.106377 -18.00032,11.000198c-3.371719,2.575302 -9.195923,10.891907 -13.000229,18.00032c-3.165375,5.914566 -3.391785,14.1875 -5.000092,21.000366c-1.54126,6.52887 -3.000061,10.000183 -3.000061,17.000305c0,5.000092 0.498749,10.946915 1.000031,18.00032c0.425354,5.985016 0.054459,11.090424 1.000015,16.000275c1.018387,5.288086 2.67012,10.013809 3.000046,14.000259c0.501724,6.062149 0.533737,10.096771 2.000031,16.000275c1.524582,6.138168 2.486313,9.823929 3.000061,12.000214c0.68927,2.9198 0.692551,6.186127 2.000031,8.000153c0.82692,1.147278 0.617325,2.076141 1.000015,3.000031c0.541214,1.30661 2.000031,1.000031 3.000061,0c1.000015,-1 1.256516,-2.797028 2.000031,-4.000061c1.662521,-2.690063 1.486282,-3.823792 2.000046,-6.000092c0.229767,-0.973267 -0.320374,-4.025909 0,-6.000122c0.506546,-3.12149 1.415924,-5.761185 3.000046,-9.000153c1.389374,-2.840775 3.190338,-5.881622 5.000092,-9.000168c2.24472,-3.868057 6.620728,-7.925659 13.000229,-10.000168c5.784698,-1.881088 10.938156,-2.498337 17.000305,-3.000061c5.97966,-0.494904 9.000153,0 11.000183,0c1.000031,0 3.519531,2.038788 4.000076,5.000092c0.506546,3.121506 4.000076,6.000107 4.000076,11.000198c0,3.000046 0,7.000122 0,10.000183c0,4.000061 0.122192,7.007614 0,8.000137c-0.503784,4.092285 -1.149368,4.474335 -2.000046,5.000092c-1.902145,1.175598 -2.458847,2.30661 -3.000046,1c-1.530746,-3.695587 -0.187866,-12.077408 4.000076,-22.000381c3.829636,-9.07399 11.113693,-17.920609 16.000275,-25.000443c4.096298,-5.93483 9.229019,-9.729797 14.000244,-14.000244c2.10759,-1.886368 5.000092,-3.000046 7.000122,-3.000046c3.000061,0 4.259674,-0.985413 6.000107,0c5.074173,2.87294 6.953537,12.020355 10.000198,19.000336c3.939972,9.026611 6.375519,18.118393 8.000122,25.000443c1.453094,6.155472 3.69455,11.082825 6.000122,19.000336c0.884155,3.036224 1.493469,6.878662 2.000031,10.000183c0.320374,1.974213 -0.070587,0.979431 2.000031,-6.000122c3.868561,-13.039963 8.738647,-25.955139 16.000275,-40.000702c5.375549,-10.397522 9.384766,-20.349792 13.000244,-26.000458c3.45105,-5.393677 5.346283,-9.705627 7.000122,-12.000214c1.307465,-1.814026 0.798615,-0.95549 2.000031,4.000061c1.715302,7.075287 3.000061,13.000229 3.000061,20.000366c0,7.000122 0,12.000214 0,16.000275c0,5.000092 0,8.000137 0,9.000168c0,1.000015 0,-4.000076 0,-13.000229c0,-9.000168 0,-18.00032 0,-28.000504c0,-11.000198 2.864044,-19.800461 5.000092,-31.000549c1.696472,-8.895203 1.732117,-17.043839 3.000031,-24.000427c1.653168,-9.070282 2.881409,-14.025444 4.000092,-19.000336c0.904572,-4.02272 1.917572,-9.056801 4.000061,-12.000206c2.887909,-4.081779 3.337555,-6.31012 5.000092,-9.00016c1.48703,-2.406044 3.797058,-4.256584 5.000092,-5.000092c2.690063,-1.662529 6.000092,-2.000038 8.000122,-2.000038c1.000031,0 3.000061,0 5.000092,0c2.000061,0 3.566589,0.134499 7.000122,3.000053c3.838837,3.203796 6.000122,9.000168 10.000183,14.000252c4.000092,5.000092 9.000153,12.000214 14.000244,22.000389c3.000061,6.000107 8.219208,15.424042 12.000214,25.000443c3.028381,7.670151 4.610352,18.238708 7.000122,28.000488c2.561096,10.461609 6.883575,16.72261 9.000183,25.000443c1.75174,6.8508 4.052765,13.987457 5.000061,18.00032c2.118256,8.973083 4.094177,17.225052 7.000153,27.000488c3.069031,10.32399 6.925659,20.788925 9.000153,32.000565c1.828522,9.882324 4.562469,16.848541 7.000122,27.000488c2.610443,10.871521 2.761414,16.044952 4.000061,22.000366c0.8396,4.036804 2.998138,8.259521 5.000092,12.000214c2.406067,4.495758 3.49353,7.878723 4.000061,11.000214c0.48053,2.961304 0,6.000092 0,7.000122c0,1 -1.210052,-1.8508 -4.000061,-6.000122c-3.253662,-4.838898 -6.1828,-10.911407 -10.000183,-19.000336c-4.20343,-8.906982 -11.355286,-18.829254 -17.000305,-31.000549c-6.408752,-13.817963 -8.827301,-21.089142 -13.000214,-29.000519c-4.803375,-9.106659 -7.568817,-13.78299 -10.000183,-21.000366c-2.632629,-7.814835 -3.891693,-14.250824 -6.000092,-21.000366c-2.000214,-6.403183 -2.761444,-13.044907 -4.000092,-19.000336c-0.8396,-4.036789 -1.498291,-11.938171 -2.000031,-18.00032c-0.659851,-7.972885 0,-14.000244 0,-19.000336c0,-6.000107 0,-12.000214 0,-16.000275c0,-2.000046 0,-5.000092 0,-6.000107c0,-2.000046 -0.707123,-3.292953 0,-4.000076c0.707123,-0.707123 2.186035,-0.307449 4.000061,1.000015c2.294586,1.653839 2.000061,4.000076 2.000061,5.000092c0,3.000046 0.57959,6.085922 0,8.000137c-1.044861,3.450928 -4.150635,4.658569 -9.000183,7.000122c-7.260376,3.5056 -11.736786,6.577301 -20.000336,10.000183c-5.843231,2.420349 -14.78302,3.568741 -22.000397,6.000107c-3.90741,1.316315 -11.878754,4.493546 -15.000275,5.000092c-0.987091,0.160187 -3.230865,1.423615 -2.000031,3.000046c2.537445,3.249908 12.000214,2.000031 23.000397,2.000031c8.000153,0 19.06778,-1.099686 28.000519,0c8.18454,1.007568 11.000183,3.000061 13.000214,3.000061c2.000031,0 3.693512,0.458817 5.000092,1.000015c0.92392,0.382706 1.000031,1.000015 1.000031,2.000031c0,1.000031 0,2.000046 0,3.000061c0,1.000015 -0.824432,1.0979 -2.000031,3.000046c-1.051483,1.70134 -0.186005,2.692581 -2.000061,4.000076c-1.147278,0.82692 -4.097961,2.824478 -6.000092,4.000076c-1.701324,1.051483 -3.823822,2.486298 -6.000122,3.000046c-0.973236,0.229752 -2.186066,0.692551 -4.000061,2.000031c-1.147278,0.82692 -2.000031,1.000031 -3.000061,1.000031c-2.000031,0 -2.000031,1.000015 -4.000061,2.000031c-2.000031,1.000015 -3.000061,2.000031 -6.000092,2.000031l-4.000092,2.000046" id="svg_1" class="q12" stroke-width="1.5" stroke="#000" fill="none"/>
</svg>

上面的代码可忽略,主要是用SVG画出的一个文字,怎么让这个文字动起来,往下看

样式部分:

        <style type="text/css">
.active{
-webkit-animation: go 10s infinite;
}
@-webkit-keyframes go{
form{
stroke-dashoffset: 10000;
}
to{
stroke-dashoffset: 0;
}
} </style>

JS部分

    <script type="text/javascript">
var p = document.querySelector("#svg_1");
var l = p.getTotalLength(); $('#svg_1').css({
strokeDashoffset: l,
strokeDasharray: l,
stroke:"red",
strokeWidth:"10px"
}) $(document).on("click",function(){
debugger
p.className.baseVal = "active";
})
</script>

好啦,自己跑一跑吧

对了对了!!! 附送一个svg 在线编辑工具 http://editor.method.ac/

另外再给一个网站,里面东西不错 http://www.yyyweb.com/

SVG 签名动画 制作的更多相关文章

  1. SVG交互动画制作

    前面我们已经说过了要怎样制作CSS3动画,但是SVG动画一直都没有时间研究过,正好趁现在有一点时间静下心来研究一下. 一般来说,常见前端动画实现方案分为三种,CSS3动画,HTML动画(SVG动画), ...

  2. SVG动画制作工具 , 从此抛弃臃肿的gif

    VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...

  3. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

  4. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  5. SVG描边动画原理

    SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...

  6. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  7. 线条之美,玩转SVG线条动画

    线条之美,玩转SVG线条动画 作者:AlloyTeam www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animat ...

  8. 玩转SVG线条动画

    在上一节的<SVG线条动画实现原理>一文中,了解了SVG中线动画是怎么做的.在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dash ...

  9. 如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

    任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战.设备间不同的屏幕尺寸.分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可 ...

随机推荐

  1. java面试题之如何实现处理线程的返回值?

    有三种实现方式: 主线程等待法: 使用Thread类的join方法阻塞当前线程以等待子线程处理完毕: 通过Callable接口实现,通过FutureTask 或者线程池:

  2. Java-约瑟夫问题(Josephus Problem)

    题目: 据说着名犹太历史学家 Josephus有过以下的故事:在罗马人占领乔塔帕特后,39 个犹太人与Josephus及他的朋友躲到一个洞中,39个犹太人决定宁愿死也不要被敌人到,于是决定了一个自杀方 ...

  3. Blog 081018

    对于 linux 系统 api, 尝试理解函数参数和函数之间的内在联系,为什么要用这些参数而不是另一些参数,了解 api 之间的一些共性. 一个扩展性良好的程序,结构都有一些共性,就像是一个国家,有好 ...

  4. Why do I keep getting mixed tabs and spaces in a Visual Studio C# code window?[vs power tools issue transfered]

    goto tools->option->power tools-> turn "use mixed tabs" option to off. you won`t ...

  5. ubuntu 安装自启动管理

    #sudo apt-get update #sudo apt-get install sysv-rc-conf 运行:#sudo sysv-rc-conf 也可以直接加入启动程序,例如把 /etc/i ...

  6. 转 new和malloc的区别

    传送门 new和malloc的区别 1. malloc()函数 1.1 malloc的全称是memory allocation,中文叫动态内存分配. 原型:extern void *malloc(un ...

  7. 标准C程序设计七---114

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  8. Codeforces Gym101606 A.Alien Sunset (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017) 寒假第一次组队训练赛,和学长一起训练,题目难度是3颗星,我和猪队友写 ...

  9. Codeforces 875C National Property(拓扑排序)

    题目链接  National Property 给定n个单词,字符集为m 现在我们可以把其中某些字母变成大写的.大写字母字典序大于小写字母. 问是否存在一种方案使得给定的n个单词字典序不下降. 首先判 ...

  10. this.class.getClassLoader().getResourceAsStream

    this.getClass().getClassLoader().getResource("template");    首先,调用对象的getClass()方法是获得对象当前的类 ...