利用animation和text-shadow纯CSS实现loading点点点的效果

经常在网上看到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 Republic of China</h4>

然后就完事了~

特点：

• 无需使用javascript
• 利用:after伪类和text-shadow纯CSS实现
• 自动保持与字体颜色一致，也可自行更改

支持：

浏览器

• 火狐
• 微软EDGE
• IE10/11
• Chrome（有一种奇特的表现）

字体

• sans-serif(微软雅黑等测试通过)
• serif（宋体等测试通过）
• monospace（微软雅黑mono等测试通过）

demo页面：https://zhangcuizc.github.io/loading-dots/

转载于:https://www.cnblogs.com/zczhangcui/p/6236391.html