剑客
关注科技互联网

小tips:CSS content字符下的animation loading效果

这篇文章发布于 2016年11月13日,星期日,20:58,归类于css相关。 阅读 10 次, 今日 10 次

byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5753

本文可全文转载,但需得到书面许可,同时保留原作者和出处,摘要引流则随意。

一、之前我的字符loading实现

关于字符打点动画实现,我之前使用过 box-shadow 模拟,还有 border+background 模拟,还有使用 text-shadow 实现,以及今年自认为是最好的实现的利用CSS3 ch 单位的实现,在“ 等宽字体在web布局中应用以及CSS3 ch单位 ”这篇文章有介绍,demo在这里,效果类似下面(偷懒,非真实截图,以前做的图):

小tips:CSS content字符下的animation loading效果

然后,我今天才发现,原来还真是一山还有一山高,有个更巧妙的字符打点动画,利用CSS content内容生成技术以及CSS3 animation实现的,并且几乎没有任何的不足,这里给大家展示下如何实现的。

CSS代码如下:

dot {
    display: inline-block; 
    height: 1em; line-height: 1;
    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+就是动画。

你可以狠狠地点击这里: content字符生成配合CSS3 animation点点点动画demo

二、content换行技术是知道的,关键是创意和思路

如果把上面使用的技术拆分下,其实都是知道的。两个要点,一是content字符内容生成的换行实现,二是CSS3 animation动画。

1.关于 content 换行技术在我之前的这篇“ 使用CSS(Unicode字符)让inline水平元素换行 ”文章有详细介绍,其中 '/A' 其实指的是换行符中的LF字符,其unicode编码是 000A ,在CSS content 属性中则直接写作 '/A' ;换行符除了LF字符还有CR字符,其Unicode编码是 000D ,在CSS content 属性中则直接写作 '/D' 。CR字符和LF字符分别指回车(CR)和换行(LF)。

2.关于CSS3 animation 介绍的文章就更多了。

CSS这么语言的精彩之处就在于,要想学得好,不仅需要技术积累,细节扎实,而且还需要创意和思路,所以,我常说CSS要想学得好是需要点那么不可言喻的天赋的,我想这种天赋就是创造性思维和发散性思维,这和一板一眼的逻辑语言不一样,毕竟我们是为精彩纷呈的效果和各式各样的布局服务的。

回到这里,我有必要好好反思下,字符打点动画我这些年时不时就思考有没有更好的实现,虽然我知道 content 内容换行技术以及熟知CSS3 animation属性,但是,我却没有想到这种实现,说明自己的思路还是不够开阔,个中关联没有能够联系在一起,唉,对自己产生了一丝丝的怀疑……

本文利用 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 个点。于是,全浏览器都显示良好。

有此可见,创意固然重要,基础和细节也是不可忽视的,这样,才能实现完美的效果——现在这种实现,外面标签的宽度就是 3 个点的宽度,不要担心超出或剪裁,字符实现,和前面的文字字体,颜色保持一致,完美!

小tips:CSS content字符下的animation loading效果

三、content字符生成配合CSS3 animation各类字符loading效果实现

其实, content 字符生成配合CSS3 animation 可以实现的不仅仅是打点这一种字符动画效果,你使用其他一些有意思的字符就能时间更多有意思的loading效果,如下截图(图截自 这个演示页面 ):

小tips:CSS content字符下的animation loading效果

例如,我们命令行中常见的loading动画实现只要 content 设置为下面这个值就可以:

.loading::after {
  display: inline-table;
  content: "//A–/A///A|";
  white-space: pre;
  animation: spin4 2s steps(4) infinite;
}

这里就不一一介绍了,有兴趣的同学可以直接去这个项目围观。

四、结束语

学习和成长就是这么回事,身在舒适区,总感觉自己挺好的,觉得自己干活麻利,技术不错,实际上还差的远呢。就好比这里的打点动画的实现,以前使用 text-shadow 实现的时候,觉得挺厉害,佩服自己的创意和思路;然后今年7月份研究 ch 单位的时候,发现之前头疼的宽度处理有了解决方法,自认为很赞的 text-shadow 实现“啪”得打脸了,然后觉得 ch 实现基本上就是到头的最佳实现;然后才短短4个月,又再次打脸,使用 content 换行字符模拟显然要更上一层楼,虽然此刻自己又觉得这种实现应该是最佳实现了,但我心里清楚,什么时候又会出现更好的实现打脸。

小tips:CSS content字符下的animation loading效果

所以,戒骄戒躁,学无止境,永不自满!

感谢阅读,欢迎交流!

小tips:CSS content字符下的animation loading效果

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: http://www.zhangxinxu.com/wordpress/?p=5753

(本篇完)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址