在 CSS 中有些属性是允许 CSS 绘制图形形状，比如常见的是使用 border 或者 box-shadow 来绘制图形或者形状。

先看一个动画效果，这种小飞机沿路径飞行(路径部分线段变成绿色是录屏软件出了问题)。 这种动画效果最常见于发送信息后，两个不同位置之间的导航指向等等，总之使用场景还是很多的。对于SVG动画来说，这种效果是最最简单不过，只需要一个路径外加几个属性的简单设置就能完成，简单到不算飞机图…

路径动画的效果还是挺有意思的，而 Web 中常用的方法就是 SVG。先上一个效果图： SVG 要在 SVG 里面实现文字路径动画还是比较简单的，SVG 里面就有天然的支持。 我们先搞个 SVG 路径 <svg id="textPathDemo" xmlns="http://ww…

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人来说这种体验差异尤其显著！ SVG（可缩放的矢量图形）解决了上文中提到的部分问题，而且做得更好。尽管 SVG 有…

利用 stroke-dasharray 和 stroke-dashoffset 来实现进度效果。