在观看视频时经常遇到卡顿，此时屏幕中间通常会有一个圆圈一直在转，作为一种正在加载的显示 其实，它可以通过CSS3的动画实现
由围成一个圈的一些小圆点，然后顺时针方向，逐个半径变小，再变大，也就是消失再出现的过程，每个点变小不是同时的，设置相同的时间差，就能形成加载中的视觉效果. 首先，在一个块中绘制4个小圆点，为了明显，先设置一下边框，后面删除即可
<div class="circleBox"> <p></p> <p></p> <p></p> <p></p> </div>然后让其固定在屏幕正中央，再分别将4个点放到边框4个角上，如图所示
/*居中显示*/ .circleBox{ position: absolute; top: 50%; left: 50%; margin: -20px 0 0 -20px; width: 40px; height: 40px; /*border: 1px solid red;*/ } /*4个点居于四个角*/ p:nth-of-type(1){ position: absolute; left: 0; top: 0; } p:nth-of-type(2){ position: absolute; right: 0; top: 0; } p:nth-of-type(3){ position: absolute; right: 0; bottom: 0; } p:nth-of-type(4){ position: absolute; left: 0; bottom: 0; }4个点看着太稀疏，我们上面整个框复制一遍，也放在屏幕正中央，不需要另外写太多CSS代码，然后将其旋转45度,实现下面的效果
/*复制上面的4点环，再旋转45度*/ .circleBox:nth-of-type(2){ transform: rotate(45deg); }去除边框之后，效果如下
接下来，就是实现圆点相继变小的过程，我们给所有的圆点设置动画，使其依次慢慢消失
@keyframes move{ 0%{ transform:scale(0); } 50%{ transform:scale(1); } 100%{ transform:scale(0); } }设置时间差
/*设置时间差*/ .circleBox:nth-of-type(1) p:nth-of-type(1){ animation-delay:-0.1s; } .circleBox:nth-of-type(2) p:nth-of-type(4){ animation-delay:-0.3s; } .circleBox:nth-of-type(1) p:nth-of-type(4){ animation-delay:-0.5s; } .circleBox:nth-of-type(2) p:nth-of-type(3){ animation-delay:-0.7s; } .circleBox:nth-of-type(1) p:nth-of-type(3){ animation-delay:-0.9s; } .circleBox:nth-of-type(2) p:nth-of-type(2){ animation-delay:-1.1s; } .circleBox:nth-of-type(1) p:nth-of-type(2){ animation-delay:-1.3s; } .circleBox:nth-of-type(2) p:nth-of-type(1){ animation-delay:-1.5s; }大概思路就是这样了，整个代码文件以及效果演示视频，请前往 https://github.com/zhangtsh5/loading-display.git
