用CSS可以写出漂亮的动画。直接上例子。
SVG动画 文字标题
SVG 线条动画基础入门知识
button垂直水平居中、shape透明填充,边框宽度4px,边框颜色#1199ff。
也许你会对fill、stroke-width等属性有点懵,下面看看他们的描述:
fill:类比 css 中的 background-color,给 svg 图形填充颜色;
stroke-width:类比 css 中的 border-width,给 svg 图形设定边框宽度;
stroke:类比 css 中的 border-color,给 svg 图形设定边框颜色;
stroke-linejoin | stroke-linecap:设定线段连接处的样式;
stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;
stroke-dashoffset:则是划线与间隔的偏移量
重点能够实现线条动画的关键属性 stroke-dasharray 。属性 stroke-dasharray 可控制用来描边的点划线的图案范式。