CSS content换行技术实现字符animation loading效果

深藏阁楼爱情的钟 2022-06-16 02:59 436阅读 0赞

### by [zhangxinxu][] from [http://www.zhangxinxu.com/wordpress/?p=5753][http_www.zhangxinxu.com_wordpress_p_5753]    ###

### 一、之前我的字符loading实现 ###

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

![点点点gif动画效果][gif]

然后，我今天才发现，原来还真是一山还有一山高，有个更巧妙的字符打点动画，利用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+就是动画。

你可以狠狠地点击这里：[content字符生成配合CSS3 animation点点点动画demo][content_CSS3 animation_demo]

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

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

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

**2. **关于CSS3 `animation`[介绍的文章][Link 2]就更多了。

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

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

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

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

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

.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::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`个点的宽度，不要担心超出或剪裁，字符实现，和前面的文字字体，颜色保持一致，完美！

![完美][wanmei.jpg]

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

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

![各类字符动画效果][2016-11-13_203610.png]

例如，我们命令行中常见的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`换行字符模拟显然要更上一层楼，虽然此刻自己又觉得这种实现应该是最佳实现了，但我心里清楚，什么时候又会出现更好的实现打脸。

![啪打脸][pa.png]

所以，戒骄戒躁，学无止境，永不自满！

最后，我们不妨把自己的思维发散下，上面诸多字符loading虽然除了水平打点动画以外，其他的效果都比较粗糙，难以直接在项目中使用，但是，要知道，我们不是有`icon fonts`技术吗，可以把粗糙的字符映射成精致的图形。于是乎，我们要想实现一些更细腻的图形动画，就很简单啦，是不是可以搞个自定义的图形字体，然后利用这里的loading原理，很多很可爱细腻的动画效果是不是就出来了！比方说点赞的时候，放点礼花；点击删除图标，垃圾桶打开动画，对不对，实现都不是难事，都可以用起来！这种实现比以前`background-image`或者JS实现要更加简单可控（大小，颜色什么的），反正我是会找机会在项目中用一用的，你们自己看着办啦！嘻嘻……

感谢阅读，欢迎交流！

转载自：[http://www.zhangxinxu.com/wordpress/?p=5753][http_www.zhangxinxu.com_wordpress_p_5753]

[zhangxinxu]: http://www.zhangxinxu.com/
[http_www.zhangxinxu.com_wordpress_p_5753]: http://www.zhangxinxu.com/wordpress/?p=5753
[Link 1]: http://www.zhangxinxu.com/wordpress/2014/12/css3-animation-dotting-loading/
[web_CSS3 ch]: http://www.zhangxinxu.com/wordpress/2016/07/monospaced-font-css3-ch-unit/
[demo]: http://www.zhangxinxu.com/study/201607/animation-text-indent-dot-dot-dot-wait.html
[gif]: /images/20220616/2db7a6f27bf24711b9949703b81f95ca.png
[content_CSS3 animation_demo]: http://www.zhangxinxu.com/study/201611/animation-content-dot-dot-dot-wait.html
[CSS_Unicode_inline]: http://www.zhangxinxu.com/wordpress/2012/03/tip-css-multiline-display/
[Link 2]: http://www.zhangxinxu.com/wordpress/?s=animation
[tawian_text-spinners]: https://github.com/tawian/text-spinners
[wanmei.jpg]: /images/20220616/3486eaffad924659bd234926252bea96.png
[Link 3]: http://tawian.io/text-spinners/
[2016-11-13_203610.png]: /images/20220616/823efcfd936d4b918ac4ffa13652d153.png
[pa.png]: /images/20220616/715e71dc767141f1b74574075f915180.png