svg画loading

成品效果

loading.gif

相关代码

文本
创建一个空的svg,写入文本<text>

<text x="0" y="55" dx="68" dy="0" fill="#e1e5ed">Loading</text>
参数 描述 默认值
x 文本绘制x轴位置 0
y 文本绘制y轴位置 0
dx 每个字符相对前一个字符的偏移距离 0
dy 每个字符相对前一个字符的偏移距离 0
fill 文字的颜色 black
stroke 如果设置了stroke,字的边缘会再“描一层边”。如果设置了stroke并将fill设为none,呈现为空心字。 none

css中影响字体样式的属性同样可以作用在<text>上。

.svg text{font-size:24px;text-align:center;font-family:"Arial Black";font-bold:bold;text-shadow:0 0 7px #fff;}

text-shadow设置文字有一圈边缘阴影


其实就是一个个的圆

<circle id="1" transform="translate(135, 70) rotate(-120) translate(-135, -70) " cx="135" cy="70" r="5"></circle>

· 半径 r 等于5;
· cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为 (0, 0);
· transform属性同CSS3的含义,可参考学习下:
SVG之transform
理解SVG坐标系统和变换: transform属性

接下来就是利用CSS3形成点的动画效果:
(1) 透明度的变化

@keyframes opacity {
  3% {
    fill-opacity: 1;
  }

  75% {
    fill-opacity: 0;
  }
}

(2) 颜色的变化

@keyframes colors {
  0% {
    fill: yellowgreen;
  }

  10% {
    fill: gold;
  }

  75% {
    fill: crimson;
  }
}

(3) 时间的变化
需要多个小圆点组成动画的效果,那么就需要每个点颜色、透明度变化的不在同一个时间点

circle {
  fill: dodgerblue;
  fill-opacity: 0;
  -webkit-animation: opacity 1.2s linear infinite;
  animation: opacity 1.2s linear infinite;
}

完整代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>loading</title>
  <style>
    svg {
      margin:0;padding:0;height: 90px;
      width: 150px;
      overflow: visible;
    }
    svg text{text-anchor: middle;font-size:24px;text-align:center;font-family:"Arial Black";font-bold:bold;text-shadow:0 0 7px #fff;}
    .g-circles {
      -webkit-transform: scale(0.9) translate(7px, 7px);
      -ms-transform: scale(0.9) translate(7px, 7px);
      transform: scale(0.9) translate(7px, 7px);
    }
    circle {
      fill: dodgerblue;
      fill-opacity: 0;
      -webkit-animation: opacity 1.2s linear infinite;
      animation: opacity 1.2s linear infinite;
    }
    circle:nth-child(12n + 1) {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }
    circle:nth-child(12n + 2) {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }
    circle:nth-child(12n + 3) {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
    circle:nth-child(12n + 4) {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
    circle:nth-child(12n + 5) {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
    circle:nth-child(12n + 6) {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
    circle:nth-child(12n + 7) {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
    circle:nth-child(12n + 8) {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
    circle:nth-child(12n + 9) {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
    circle:nth-child(12n + 10) {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }
    circle:nth-child(12n + 11) {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
    circle:nth-child(12n + 12) {
      -webkit-animation-delay: -1.2s;
      animation-delay: -1.2s;
    }
    .g-circles--v3 circle {
      fill-opacity: 1;
      -webkit-animation-name: opacity, colors;
      animation-name: opacity, colors;
    }
        /***透明度***/
    @-webkit-keyframes opacity {
      3% {
        fill-opacity: 1;
      }

      75% {
        fill-opacity: 0;
      }
    }

    @keyframes opacity {
      3% {
        fill-opacity: 1;
      }

      75% {
        fill-opacity: 0;
      }
    }
        /***颜色变化***/
    @-webkit-keyframes colors {
      0% {
        fill: yellowgreen;
      }

      10% {
        fill: gold;
      }

      75% {
        fill: crimson;
      }
    }
    @keyframes colors {
      0% {
        fill: yellowgreen;
      }

      10% {
        fill: gold;
      }

      75% {
        fill: crimson;
      }
    }

  </style>
</head>

<body>
    <svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <text x="0" y="55" dx="68" dy="0" fill="#e1e5ed">Loading</text>
      <g id="circle" class="g-circles g-circles--v3">
          <circle id="1" transform="translate(135, 70) rotate(-120) translate(-135, -70) " cx="135" cy="70" r="5"></circle>
          <circle id="2" transform="translate(120, 70) rotate(-90) translate(-120, -70) " cx="120" cy="70" r="5"></circle>
          <circle id="3" transform="translate(105, 70) rotate(-60) translate(-105, -70) " cx="105" cy="70" r="5"></circle>
          <circle id="4" transform="translate(90, 70) rotate(-30) translate(-90, -70) " cx="90" cy="70" r="5"></circle>
          <circle id="5" transform="translate(75, 70) rotate(-60) translate(-75, -70) " cx="75" cy="70" r="5"></circle>
          <circle id="6" transform="translate(60, 70) rotate(-120) translate(-60, -70) " cx="60" cy="70" r="5"></circle>
          <circle id="7" transform="translate(45, 70) rotate(-90) translate(-45, -70) " cx="45" cy="70" r="5"></circle>
          <circle id="8" transform="translate(30, 70) rotate(-60) translate(-30, -70) " cx="30" cy="70" r="5"></circle>
          <circle id="9" transform="translate(15, 70) rotate(-30) translate(-15, -70) " cx="15" cy="70" r="5"></circle>
          <circle id="10" transform="translate(0, 70) rotate(-30) translate(0, -70) " cx="0" cy="70" r="5"></circle>
      </g>
  </svg>

</body>
</html>

推荐阅读更多精彩内容

  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    poetries阅读 7,166评论 23 224
  • SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...
    Penn_Xu阅读 341评论 0 0
  • 一、什么是SVG? SVG指可伸缩矢量图形(Scalable Vector Graphics); SVG用来定义用...
    清心挽风阅读 503评论 1 2
  • 一:什么是SVG? 对于SVG的定义如下: ①:SVG 指的是可伸缩矢量图形 (Scalable Vector G...
    GreenHand1阅读 200评论 0 1
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    圆圆和方方阅读 493评论 0 7