AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

CSS实现:努力加载中…(动态)

方法摘自:张鑫旭《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行显示点。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注