CSS content换行技术实现字符loading效果

发表于

偶然从张鑫旭大神博客看来的技巧

很巧妙的运用before伪类以及content的换行实现的loading…效果

css代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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;   /* 也可以是white-space: pre */
  animation: dot 3s infinite step-start both;
}
@keyframes dot {
  33% { transform: translateY(-2em); }
  66% { transform: translateY(-1em); }
}

html代码：

1
loading<dot>...</dot>

简要分析

  1. content中的\A指的是换行符中的LF字符，CR字符在content中用\D表示
  2. animation很简单没什么好说的，其实实际就是点的三种形态分三行来显示，overflow来隐藏多余的点，动画来变化显示的点，很聪明的实现方法！
  3. 其他拓展：content: "/\A–\A\\\A|";