随身笔记
随身笔记

svg路径描边动画效果

代码的核心思想就是:

path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

要弄懂stroke-dasharraystroke-dashoffset之间的关系。

假设在一张宽10px的纸上画一条虚线很长虚线之间的间隔是50px的描边,这时候在纸上什么都看不到,如果在设置stroke-dashoffset的偏移量,慢慢一点点的偏移就能一点点的看到一个条展露出来的线段。这就是描边动画效果的原理。

http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

随身笔记

svg路径描边动画效果
代码的核心思想就是: path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 5s linear infinite; } @keyframes dash { to { stroke-dashoff…
扫描二维码继续阅读
2015-06-18