TL;DR 本文主要是讲解关于 SVG 的一些高级动画特效，比如 SVG 动画标签，图形渐变，路径动画，线条动画，SVG 裁剪等。 例如：路径动画 图形渐变： 线条动画： 以及，相关的动画的矩阵知识，这个也是现在 CSS 动画里面最重要，同时也是最为欠缺的知识点： 文章会先从基本语法入手，然后，慢慢 ...
分类：
其他好文 时间：
2020-05-15 10:11:09
阅读次数：
98
在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalL ...
分类：
其他好文 时间：
2020-03-31 10:28:42
阅读次数：
117
动画效果 svg 动效，张鑫旭，https://www.zhangxinxu.com/wordpress/2014/08/so powerful svg smil animation/ svg 线条动画，切图崽，https://www.cnblogs.com/coco1s/p/6225973.htm ...
分类：
其他好文 时间：
2018-09-22 12:29:35
阅读次数：
164
上一篇讲过css动画transform transition的语法，这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码：最外层div包含2个小的div : a和b. a有左右边框(高度变化)， b有上下边框（宽度变化）, 默认不显示，鼠标移上去时，a的高度和b的宽度发生变化，交叉效果 2 ...
分类：
Web程序 时间：
2018-08-16 01:01:20
阅读次数：
242
1.盒子边框的线条动画： <div class="cont"> <div class="bb"></div> </div> .bb{ position: relative; width: 200px; height: 200px; background: #666666; border: 1px s ...
分类：
其他好文 时间：
2018-08-03 16:38:35
阅读次数：
335
1、 手把手教你轻松实现SVG动画.html（https://baijiahao.baidu.com/s?id=1571093667630324&wfr=spider&for=pc） 【Web动画】SVG 实现复杂线条动画 - ChokCoco - 博客园.html（https://www.cnbl ...
分类：
其他好文 时间：
2018-02-08 17:54:03
阅读次数：
153
0、小叙闲言 今天在用PPT做动画的时候小有心得，百度了一下线条动画制作，有一个贴子里面的讨论，也给了我一些灵感，贴子地址：http://www.rapidbbs.cn/thread-24577-1-1.html。但是还是没有做下图这样的效果的动画，这是自己纯想出来的，分享一下，或许对大家有点帮助。 ...
分类：
其他好文 时间：
2017-04-27 22:02:40
阅读次数：
180
git: https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/path 说明 这个动画实现的是线条动画,主要用到的是 SVG 的 path 标签。 <path> 标签命令 试用 <path> 标签的 d 属性标 ...
分类：
其他好文 时间：
2017-04-07 11:10:43
阅读次数：
348
