content换行符与打点loading效果实例页面

发表于 分类于 阅读次数：

代码如下：

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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); }
}

HTML

1
<div class="wrap">正在加载中<dot>...</dot></div>