专栏首页杰的记事本CSS3实现loading点点点动画效果

CSS3实现loading点点点动画效果

利用CSS content内容生成技术以及CSS3 animation实现的,并且几乎没有任何的不足,这里给大家展示下如何实现的。

CSS代码如下:

dot {
    display: inline-block; 
    height: 1em; line-height: 1;
    text-align: left;
    vertical-align: -.25em;
    overflow: hidden;
}
dot::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;   /* 也可以是white-space: pre */
    animation: dot 3s infinite step-start both;
}
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
}

HTML代码如下:

订单提交中<dot>...</dot>

然后成就即达成!并且IE6-IE9完美自动向下兼容(静态3个点),IE10+就是动画。

https://javascript.shop/css%e8%ae%a9conent%e9%87%8c%e7%9a%84%e6%96%87%e5%ad%97%e6%8d%a2%e8%a1%8c-%ef%bc%88content-da%ef%bc%89/ 其中'\A'其实指的是换行符中的LF字符,其unicode编码是000A,在CSS content属性中则直接写作'\A';换行符除了LF字符还有CR字符,其Unicode编码是000D,在CSS content属性中则直接写作'\D'。CR字符和LF字符分别指回车(CR)和换行(LF)。

本文利用content实现字符打点loading效果我是在这个github项目看到的:tawian/text-spinners

当然,我自己还有一丝欣慰的,就是站在巨人的肩上,我细节要比原实现要好,好在没有使用任何hack技巧实现的所有浏览器的全兼容(不支持animation的浏览器静态三个点),原来的实现直接忽略了IE9-IE6浏览器,直接没有点。

原来的实现content是使用的<span>元素,CSS部分使用的是::after伪元素,display设置为inline-table,第1行是1个点,代码如下:

<span class="loading"></span>
.loading::after {
  display: inline-table;
  content: "\A.\A..\A...";
  white-space: pre;
  animation: spin4 2s steps(4) infinite;
}

而我的实现的是使用自定义的<dot>元素,CSS部分使用的是::before伪元素,display设置为block,第1行是3个点,代码如下:

<dot>...</dot>
dot::before {
  display: block;
  content: '...\A..\A.';
  white-space: pre-wrap;
  animation: dot 3s infinite step-start both;
}

使用自定义<dot>元素的好处是IE7,IE8浏览器根本就不认识这个元素,相关CSS会忽略,直接显示3个点;使用::before伪元素,display设置为block原因在于其他现代浏览器可以把原来的3个点推到看不见的最下面,显示的是content插入的第1行的3个点。于是,全浏览器都显示良好。

animation的一些参数

  1. animation-name 就是@keyframes后面跟着的动画名称,本demo本文中名为dot,意思为“点”。
  2. animation-timing-function 定义动画播放的方式,参数设置类似transition-timing-function.常见缓动类型有:先快后慢(OOXX-out),还是后快先慢(OOXX-in),还是中间快两头慢(OOXX-in-out)——(OOXX = ease)。这个邪恶记法以前介绍过,不好意思展开解释。而这里使用的是step-start, 顾名思意,“一步一步开始”,表现在动画中就是一帧一帧播放、一顿一顿画面;有时候就是需要这样的效果哦!
  3. animation-iteration-count 顾名思意:“动画迭代次数”。默认就1次,当然,我们可以设置2次,3次,4次,…这辈子撸的数目次。如果撸的次数实在太壮观,建议使用infinite关键字,表示无限、无穷无尽,撸到天荒地老,铁杵成针!本demo就是这么干的~~
  4. animation-duration 指一个动画周期持续时间。单位秒s或毫秒ms.
  5. animatin-delay 指动画延时执行时间。单位秒s或毫秒ms.
  6. animation-direction 指动画时间轴上帧前进的方向。默认为normal, 表示一路向前,往前播放。另外可选值alternate,表示动画往前播放完了之后,然后再倒带,倒带到头了再往后播放,来来回回~~本demo如果应用alternate值,那效果就会是:一个点→两个点→三个点→三个点→两个点→一个点……;而不是目前展示的一个点→两个点→三个点→一个点→两个点→三个点……
  7. animation-fill-mode 顾名思意,“动画填充模式”,啥子意思呢?我们装修时候,都见过铺地面砖或地板的,地砖与地砖时间只有缝隙的,我们需要填充,如何个填充法,我们就称之为“填充模式”。 一个动画周期就好比一块地面砖,动画与动画周期之间就会存在类似的缝隙,animation-fill-mode就是确定动画遭遇缝隙时如何“填充”的。一图胜千言: 由图可见(网上的解释都TM简单的敷衍):
    • none(默认值),表示动画应用之时、动画延时执行之前之前、以及动画结束之后,元素呈现的都是默认状态。
    • forwards,前进,表示动画结束后,元素就是当前动画结束时候的状态。对应keyframe中的"to""100%"帧。如果应用alternate值,同时无限或偶数次数动画,此时最终keyframe"from""0%"关键帧。
    • backwards,返回,表示动画开始之前,元素处于keyframe"from""0%"关键帧的状态。由于大多数动画的animatin-delay为0, 由于没有指定forwards状态(如:both值),因此我们视觉上看到的表现是:动画结束后,动画回到了起始关键帧状态;实际是动画开始之前就如此,而不是结束,万万不可被此假象误导。要想看清现实,可以设置animation-delay为非0值,我们就可以看到动画开始之前,元素就是"0%"起始关键帧状态,而不是元素默认状态。直观且准确反映了backwards的准确释义。实际应用中,animation-delay设置了非0值,同时不是step-start动画形式,此参数慎用,除非元素默认状态就是起始帧状态,否则动画犹如抽风了一样~
    • bothforwardsbackwards双P, 这是个略考智商的属性,既当爹又当妈的,这可怎么搞!好搞的,如果要求同一时间既爹又妈,你不是人妖,搞不来。但是白天当爹,晚上当妈,我想相对容易多。这里也是如此,both的关系,中文意思是“同时”,表示:动画开始之前是"from""0%"关键帧;动画完成之后是"to""100%"关键帧状态。
  8. animation-play-state 动画运行状态,属性为:running(默认)以及paused. 这个什么时候有用的,使用animation实现视频播放效果的时候。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SQL游标的使用与语法

    declare @name nvarchar(35)  declare @number int

    javascript.shop
  • CSS动画简介

    在CSS 3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。

    javascript.shop
  • HTML meta标签实现定时刷新或跳转

    几乎所有的网页头部都有<meta>源信息。除了我们常用的定义编码、关键字(name=”keywords”)、描述(name=”description”)(for...

    javascript.shop
  • CSS魔法堂:更丰富的前端动效by CSS Animation

    ^_^肥仔John
  • CSS魔法堂:更丰富的前端动效by CSS Animation

     在《CSS魔法堂:Transition就这么好玩》中我们了解到对于简单的补间动画,我们可以通过transition实现。那到底多简单的动画适合用transti...

    ^_^肥仔John
  • 如何实现SAP UI5 Web Component React控件的加载效果

    假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图:

    Jerry Wang
  • Android高级动画(4)完结篇目录回顾封装库总结

    Android高级动画(1)http://www.jianshu.com/p/48554844a2db Android高级动画(2)http://www.ji...

    大公爵
  • 「数据架构」全级别数据模式建模,宇宙最全面

    是我们重新构建模式、数据模型和数据架构的独特机会。我们确实需要做一些更好的事情。

    首席架构师智库
  • 【ACL 2020】腾讯AI Lab解读三大前沿方向及入选的20篇论文

    自然语言理解是腾讯 AI Lab 的主要研究方向之一,研究能力也一直处于业界领先水平。总体而言,腾讯 AI Lab 的研究内容囊括从自然语言理解到生成的整个链条...

    zenRRan
  • 算法训练 结点选择

    有一棵 n 个节点的树,树上每个节点都有一个正整数权值。如果一个点被选择了,那么在树上和它相邻的点都不能被选择。求选出的点的权值和最大是多少?

    刘开心_1266679

扫码关注云+社区

领取腾讯云代金券