利用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/
利用animation和text-shadow纯CSS实现loading点点点的效果的更多相关文章
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- 纯CSS实现各类气球泡泡对话框效果
原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
- 纯CSS实现项目展示遮罩详情效果
本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...
- 一款纯css实现的垂直时间线效果
今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文 ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 纯js和纯css+html制作的手风琴的效果
一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...
- 不可思议的纯CSS导航栏下划线跟随效果
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- 用纯CSS实现加载中动画效果
HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut&quo ...
随机推荐
- 企业管理软件ERP演变之一
ERP软件的云应用,云管理: 移动订单: 移动订货: 移动库存: 移动工作流: 将这些原素整合在一起 聚焦企业社交网络,打造社会化企业应用的开放平台: 希望您对有帮助. 企业 ...
- 窗体作为控件嵌入panel
EyeView frm = new EyeView(); frm.TopLevel = false; frm.Parent = this.panel1; frm.FormBorderStyle = F ...
- Using AlloyTouch to control three.js 3D model
As you can see, the above cube rotation, acceleration, deceleration stop all through the AlloyTouch ...
- H3 BPM初次安装常见错误详解5-7
错误5:登陆无反应,F12查看后台网络请求错误如下图所示 错误原因:ISAPI未对相应的.net版本允许. 解决方法:IIS的根节点--右侧"ISAPI和CGI限制"打开--将相 ...
- Images.xcassets不能获取图片路径
原文地址:http://www.jianshu.com/p/5358f587af38 Images.xcassets在app打包后,以Assets.car文件的形式出现在bundle中.其作用在于: ...
- react-native DatePicker日期选择组件的实现
本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...
- java日历显示年份、月份
import java.util.Scanner;class CalendarMain{ //主函数入口 public static void main(String[] args) ...
- 记录一次Quartz2D学习(四)
(三)内主要讲了图片与文字的绘制 本次主要讲解 绘制状态的保存与恢复,以及对它的使用 4.绘制状态 4.1 绘制状态的保存与恢复,以及对它的应用 TIP:通过对保存恢复绘制状以及多次的渲染,可以绘制出 ...
- oracle 自增长序列
create or replace TRIGGER "METTINGUSER".TRG_PREPN BEFORE INSERT ON "PREPROJFUN" ...
- Linux 下dns的搭建
1.软件安装: redhat默认使用bind作为安装软件 使用yum安装 yum install -y bind bind-chroot bind-utils bind提供主程序 bind-chroo ...