svg animation应用之-描边效果

stroke是比较重要的svg属性分支

  • stroke-width 表示描边的粗细
  • stroke-linejoin 表示描边转角的表现方式 miter, round, bevel, inherit

svg animation应用之-描边效果

  • stroke-dasharray 表示虚线描边
  • stroke-dashoffset 表示虚线的起始偏移

主角是stroke-dasharray&stroke-dashoffset
效果详解:张鑫旭.纯CSS实现帅气的SVG路径描边动画效果

直接上代码

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

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

1000没有什么特殊含义,只是足够大
svg animation应用之-描边效果

illustrator变换路径,置换svg起始点

用于描边时更换方向

svg animation应用之-描边效果

另外用transform时会导致z-index失效,所以布局时需要注意。

相关推荐