content+animation实现loading效果

Posted 2020-11-02 daobanan

<dot></dot>

dot {
    display: inline-block;
    height: 1em; line-height: 1;
    vertical-align: -.25em;
    overflow: hidden;
    font-size:initial;
}
dot::before {
    display: block;
    content: ‘...\A..\A.‘;
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
}

其中‘\A‘其实指的是换行符中的LF字符，其unicode编码是000A，在CSS content属性中则直接写作‘\A‘；换行符除了LF字符还有CR字符，其Unicode编码是000D，在CSS content属性中则直接写作‘\D‘。CR字符和LF字符分别指回车（CR）和换行（LF）。

更多方法