经常在网上看到loading状态时的点点点的动态效果，自己也用JS写了一个，思路是使用一个计数参数，然后在需要添加点的元素后面利用setInterval一个一个加点，当计数到3时，把点变为一个……写完后我就觉得很不对劲，虽然JS代码也很简单，但是这么小的一件事还得拿JS搞这么多乱七八糟的？
然后去网上看到张鑫旭大神的一篇关于利用CSS实现loading状态时三个点的动态效果的文章，在评论区看到一位朋友的评论：利用text-shadow也可以实现打点效果，突然对这个很感兴趣，自己做来试试。
1、首先去W3SCHOOL看了看text-shadow的说明，因为以前对它的印象是给文本加阴影的，用的也不是太多。
首先注意到一句话：
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
也就是说，可以产生多个阴影，那么产生任意个点的效果也成为可能。
再看它支持的参数：
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
比如：
text-shadow: 15px 15px 5px #f00;
它的阴影是：
但是，如果我们把水平阴影位置向右偏移一定距离，垂直阴影不偏移，模糊距离为0，再利用currentColor关键字设置颜色，那么就可以出现和点一模一样的阴影。
比如：
text-shadow: 15px 0 0 currentColor;
它的阴影是：
2、所以text-shadow确实可以实现和点一模一样的效果，然后开始下一步工作~（接下来不知道该怎么说了，看代码把。。）
.dot:after{
content: ".";
display: inline-block;
width: 2em;
text-indent: -0.5em;
overflow: hidden;
vertical-align: bottom;
-webkit-animation: dotting 5s infinite;
-o-animation: dotting 5s infinite;
-moz-animation: dotting 5s infinite;
animation: dotting 5s infinite;
text-align: left;
}
@keyframes dotting{
0%{
text-shadow: 0em 0 0 currentColor;
}
25%{
text-shadow: 0.7em 0 0 currentColor;
}
50%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor;
}
75%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor,1.9em 0 0 currentColor;
}
100%{
text-shadow: 0em 0 0 currentColor;
}
}
@-webkit-keyframes dotting{
0%{
text-shadow: 0em 0 0 currentColor;
}
25%{
text-shadow: 0.7em 0 0 currentColor;
}
50%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor;
}
75%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor,1.9em 0 0 currentColor;
}
100%{
text-shadow: 0em 0 0 currentColor;
}
}
@-o-keyframes dotting{
0%{
text-shadow: 0em 0 0 currentColor;
}
25%{
text-shadow: 0.7em 0 0 currentColor;
}
50%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor;
}
75%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor,1.9em 0 0 currentColor;
}
100%{
text-shadow: 0em 0 0 currentColor;
}
}
@-moz-keyframes dotting{
0%{
text-shadow: 0em 0 0 currentColor;
}
25%{
text-shadow: 0.7em 0 0 currentColor;
}
50%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor;
}
75%{
text-shadow: 0.7em 0 0 currentColor,1.3em 0 0 currentColor,1.9em 0 0 currentColor;
}
100%{
text-shadow: 0em 0 0 currentColor;
}
}
首先在需要实现这个效果的元素后面添加一个after伪类，内容为1个点，但是我把这个点隐藏在最左边，只利用keyframes和animation使这个点出现1-3个阴影。
3、简单粗暴的使用方法：
引入以上的样式声明，在想要加入该样式的元素上添加dot类。比如：
<h4 class="dot">The people's *</h4>
然后就完事了~
特点：
- 无需使用javascript
- 利用:after伪类和text-shadow纯CSS实现
- 自动保持与字体颜色一致，也可自行更改
支持：
浏览器
- 火狐
- 微软EDGE
- IE10/11
- Chrome（有一种奇特的表现）
字体
- sans-serif(微软雅黑等测试通过)
- serif（宋体等测试通过）
- monospace（微软雅黑mono等测试通过）