&nbs p;
一、之前我的字符loading实现
关于字符打点动画实现，我之前使用过 box-shadow 模拟，还有 border+background 模拟，还有使用 text-shadow 实现，以及今年自认为是最好的实现的利用 CSS 3 ch 单位的实现，在“等 宽 字体在web布局中应用以及CSS3 ch单位”这篇 文章 有介绍，demo在这里，效果类似下面（偷懒，非真实截图，以前做的图）：
然后，我今天才发现， 原来 还真是一山还有一山高，有个更巧妙的字符打点动画， 利用 CSS content内容生成技 术 以及CSS3 animation实现的，并且几乎没有任何的不足，这里给大家展示下如何实现的。
CSS代码如下：
dot { dis play : inline-block; h ei ght: 1em; line-height: 1; text-align: left; vert ical -align: -.25em; overflow: hidden; } dot :: before { display: block; content: ' .. ./AA.'; wh IT e -s pace: PR e-wrap; /* 也可以是white-space: pre */ animation: dot 3s infinite step-start both; } @keyfr am es dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } } HT ML 代码如下：
订单提交中<dot>...</dot>
然后成就即达成！并且IE6 -i E9完美自动向下兼容（静态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效果我是在这个gith ub 项目看到的：tawian/text-spinners
当然，我自己还有一丝欣慰的，就是站在巨人的肩上，我细节要比原实现要好，好在没有使用任何hack技巧实现的所有浏览器的全兼容（不支持animation的浏览器静态 三个点 ），原来的实现直接忽略了IE9-IE6浏览器，直接没有点。
原来的实现 content 是使用的 <span> 元素，CSS部分使用的是 : :after 伪元素， display 设置为 inline -t able ，第1行是 1 个点，代码如下：
<span class="loading"></span>
.loading::after { display: inline-table; content: "/A./AA..."; white-space: pre; animation: spin4 2s steps(4) infinite; } 而我的实现的是使用自定义的 <dot> 元素，CSS部分使用的是 ::before 伪元素， display 设置为 block ，第1行是 3 个点，代码如下：
<dot>...</dot>
dot::before { display: block; content: '.AA.'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } 使用自定义 <dot> 元素的好处是IE7,IE8浏览器根本就不认识这个元素，相关CSS会忽略，直接显示3个点；使用 ::before 伪元素， display 设置为 block 原因 在于其他现代浏览器可以把原来的 3 个点推到看不见的最下面，显示的是 content 插入的第1行的 3 个点。于是，全浏览器都显示良好。
有此可见，创意固然 重要 ，基础和细节也是不可 忽视 的，这样，才能实现完美的效果——现在这种实现，外面标签的宽度就是 3 个点的宽度，不要担心超出或剪裁，字符实现，和前面的文字字体，颜色保持一致，完美！
@H_467_ 126 @
三、content字符生成配合CSS3 animation各类字符loading效果实现
其实， content 字符生成配合CSS3 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 换行字符模拟显然要更上一层楼，虽然此刻自己又觉得这种实现 应该 是最佳实现了，但我心里清楚，什么时候又会出现更好的实现打脸。
所以，戒骄戒躁，学无止境，永不自满！
最后，我们不妨把自己的思维发散下，上面诸多字符loading虽然除了水平打点动画以外，其他的效果都比较粗糙，难以直接在项目中使用，但是，要知道，我们不是有 icon fonts 技术吗，可以把粗糙的字符映射成精致的图形。于是乎，我们要想实现一些更细腻的图形动画，就很 简单 啦，是不是可以搞个自定义的图形字体，然后利用这里的loading原理，很多很可爱细腻的动画效果是不是就出来了！比方说点赞的时候，放点礼花；点击删除图标， 垃圾 桶打开动画，对不对，实现都不是难事，都可以用起来！这种实现比以前 background-image 或者 JS实现要更加简单可控（大小，颜色什么的），反正我是会找 机会 在项目中用一用的， 你们 自己看着办啦！嘻嘻……
感谢阅读，欢迎交流！
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS content换行实现字符点点点loading效果 全部内容，希望文章能够帮你解决 html5教程-CSS content换行实现字符点点点loading效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS content换行实现字符点点点loading效果的详细内容...