CSS实现:努力加载中…(动态)
2019年11月12日
方法摘自:张鑫旭《CSS世界》
<div>努力加载中<dot>...</dot></div>
dot { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: '...\A..\A.'; /* \A代表换行 */ white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } }
代码解释:
1、为什么使用<dot>元素?
<dot>是一个自定义元素,除了简约、语义化明显外,更重要的是方便向下兼容,IE8等低版本浏览器不认识自定义的HTML元素,因此会忽略<dot>元素,只显示其中的3点,同时会忽略下面用在<dot>元素上的CSS代码。
2、为什么使用::before, 可不可以使用::after?
伪元素使用::before同时display设置为block,是为了在高版本浏览器中将<dot>元素中的3点推到最下面,不影响content中的3行内容。
3、从content属性来看,是3个点在第一行,2个点在第二行,1个点在第三行,为什么这么处理?
3个 点在第一行的目的在于兼容IE9浏览器,因为IE9浏览器认识<dot>元素以及::before,但是不支持CSS3的animation属性,所以,为了在IE9浏览器中显示静态的3个点,才把3个点放在第一行。
4、white-space值为什么使用pre-wrap而不是pre?
也可以使用pre,在这里效果一样,就是为了实现3行显示点。