css loading页面的实现-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    dot {
      /* dot标签 inline-block 表示可以与其他元素在一行。
       * em指的是相对长度，相对单位长度指定了一个长度相对于另一个长度的属性
       * vertical-align 垂直对齐，vertical-align属性默认为baseline，baseline意味着元素的基线通父元素的基线对齐，父元素的基线为字母x的下边缘
       * line-height 的值为数字时，表示的相对于 font-size 的倍数，但问题在于，font-size:100px 对应的文字在不同字体里的高度是不一样的！ 
       */
        display: inline-block; 
        height: 1em;
        line-height: 1;
        text-align: left;
        vertical-align: -.25em;
        overflow: hidden;
    }
    dot::before {
        display: block;
        content: '...\A..\A.'; /*表示的是换行,这里的意思是 第一行3个点 第二行两个点 第三行是一个点*/
        /*
         *  white-space: nowrap   文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
         *         pre       空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 
         *         pre-wrap  保留空白符序列，但是正常地进行换行。
         *         normal    默认。空白会被浏览器忽略。    
        */
        white-space: pre-wrap;
        /**
         * dot是绑定的keyframes的名字 3s执行完成一次 ， infinite无限循环
         * animate动画是连续的，但是我们这儿是一帧一帧的，一卡一卡的，不是那么连续的效果，用到step-start。
         * both：设置对象状态为动画结束或开始的状态,动画开始之前是"from"或"0%"关键帧；动画完成之后是"to"或"100%"关键帧状态。
         */
        animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
      /*
       * translateY()函数表示在页面垂直移动元素. 
       */
        33% { transform: translateY(-2em); }
        66% { transform: translateY(-1em); }
    }
  </style>
</head>
<body>
  正在加载中<dot>...</dot>
</body>
</html>