css特效动画——页面加载中 ..._自定义

实现原理

插入3行内容，分别是3个点、2个点和1个点，然后通过transform控制垂直位置，依次展示每一行的内容。

完整范例代码

<template>
    <div style="text-align: center;padding-top: 100px">
        正在加载中
        <dot>...</dot>
    </div>
</template>
<style scoped>
    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;
        animation: dot 3s infinite step-start both;
    }

    @keyframes dot {
        33% {
            transform: translateY(-2em);
        }
        66% {
            transform: translateY(-1em);
        }
    }
</style>

更多解析

  • dot是自定义的一个标签元素，除了简约、语义化明显外，更重要的是方便向下兼容，IE8等低版本浏览器不认识自定义的HTML标签，因此，会乖乖地显示里面默认的3个点，对我们的CSS代码完全忽略。
  • 伪元素使用::before同时display设置为block，是为了在高版本浏览器下原来的3个点推到最下面，不会影响content的3行内容显示，如果使用::after怕是效果就很难实现
  • 3个点在第一行的目的在于兼容IE9浏览器，因为IE9浏览器认识dot以及::before，但是不支持CSS新世界的animation属性，所以，为了IE9也能正常显示静态的3个点，故而把3个点放在第一行。
  • '\A'是换行符中的LF字符，其Unicode编码是000A，在CSS的content属性中则直接写作'\A'；换行符除了LF字符还有CR字符，其Unicode编码是000D，在CSS的content属性中则直接写作'\D'。CR字符和LF字符分别指回车（CR）和换行（LF）