成品效果
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>
