一、你需要准备什么？
对于svg，可能一些刚接触前端的同学比较的陌生。你可以先去MDN上看一下基本的介绍。本篇内容最重要的一个知识点就是stroke-dasharray和stroke-offset的组合使用。
这里你可以先看一下
张鑫旭对于stroke相关属性的介绍
二、加载等待动画
这个动画大家应该很熟悉：
这个难度不是很大，本质上就是一个小圆弧在圆环上旋转。
svg(viewBox="0 0 50 50")
circle(class="item" cx="25" cy="25" r="20" fill="none")
circle(class="item" cx="25" cy="25" r="20" fill="none")
复制代码
对于圆环的设置我们采用stroke-dasharray来实现:
.item:nth-child(2) {
stroke: rgb(24,120,222);
stroke-width: 2px;
stroke-dasharray: 10, 300;
stroke-linecap: round;
复制代码
接下来重点来了，我们需要通过transform让图形旋转。一谈到 transform不得不要注意transform-origin的设置。对于HTML中的元素，我们通过transform-origin的设置，很容易就解决了。但是SVG中的transform变化就没这么简单，这里有一篇很好文章作为参考
张鑫旭SVG transform坐标变换
这里我就采用比较朴实的方法，旋转SVG：
svg {
animation: zfbloading 1.4s linear infinite;
@keyframes zfbloading {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
复制代码
三、加载失败动画
接下来我们实现这样的效果：
首先看一下它的结构：
svg(viewBox="0 0 100 100")
circle(cx="50" cy="50" r="40" fill="none")
path(class="line1" d="M30 30 L70 70" fill="none")
path(class="line2" d="M70 30 L30 70" fill="none")
复制代码
首先对于外圈的动画我们还是采用stroke-dasharray和stroke-dashoffset来实现。但是这里你要完完全全的理解这两个属性的用法（好好看看上文提供的张鑫旭的文章），他通过一个火腿肠的例子很好的讲解了这两者的用法。
从动画效果可以看出，小圆弧在旋转的过程中长度由短边长，由长变短，最后形成一个圆。
@keyframes loading {
stroke-dasharray: 0, 251;
stroke-dashoffset: 0;
35% {
stroke-dasharray: 86, 86;
stroke-dashoffset: -86;
70% {
stroke-dasharray: 0, 251;
stroke-dashoffset: -251;
100% {
stroke-dasharray: 251, 0;
stroke-dashoffset: -251;
复制代码
对于上述CSS代码中的251，你可以通过JS中的getTotalLength方法获取到。
对于叉号的动画效果，我们仍然采用的是stroke-dasharray和stroke-dashoffset实现。到这里你应该明白了这两个属性的重要性。再通过animation-delay设置动画的衔接。
显然SVG的魅力不止于此，下次再见。
喜欢本文的小伙伴们,欢迎关注我的订阅号
超爱敲代码
,查看更多内容.
