很多时候，我们需要自己实现一个环形进度条，现有UI框架不满足需求的时候，我们就可以使用svg来自己实现一个。

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第N天，点击查看活动详情 开篇 这个需求也是最近的 大屏项目 里面需要用到的一个效果，大致需求是实现一个圆形范围内 由一个不确定坐

一张图结缘于SVG，从此对SVG的线条动画情有独钟。一文带你秒懂SVG，从此你也可以成为别人眼中的SVG大神。

css的rotate3d实现炫酷的圆环转动动画，rotate3d() 函数定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义;

写博客，可以将你学的七零八碎的知识点整合到一起，形成完整的个人笔记。这份笔记，记录了你囫囵吞枣的内容，也记录了你从理论到实践的历程。如果有一天，你想回顾这些知识点，对照着曾经记录的笔记，会起到事半功倍的效果。 你还要把笔记分享出来，因为有人监督与无人监督的效果大相径庭。如果是自…

我喜欢去尝试各种动画效果，尤其是使用CSS实现简单的动画。但是，如果从长远来看，只会使用CSS实现动画让我们走不远。而且，若你想实现复杂的交互式用户体验，你早晚要用到JavaScript。

SVG是一种矢量图格式，是 Scalable Vector Graphics 三个单词的首字母缩写。当你需要开发web动画时，这里可以给你提供一个清晰的思路。

在 SVG 中，如果我们想实现一个动画效果，可以使用 CSS，JS，或者直接使用 SVG 中自带的 animate 元素（SMIL）。这里我们主要探讨SVG与CSS结合实现的一些常见动画效果。

根据SVG路径创建动画，包含心形动画、炸弹引线动画、webgl动画等。图像皆由SVG创建，再进行延申，实现不同的效果，一起来学习吧~