利用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;

它的阴影是:利用animation和text-shadow纯CSS实现loading点点点的效果

但是,如果我们把水平阴影位置向右偏移一定距离,垂直阴影不偏移,模糊距离为0,再利用currentColor关键字设置颜色,那么就可以出现和点一模一样的阴影。

比如:

text-shadow: 15px 0 0 currentColor;

它的阴影是:利用animation和text-shadow纯CSS实现loading点点点的效果

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等测试通过)

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

上一篇:Ubuntu packages multi-architectures


下一篇:Homebrew安装和使用