加载中的css动画

1.文字闪烁

<div class="fade-text">这是一段忽亮忽暗的文字</div>  

  .fade-text {  
    animation: fadeInOut 2s infinite;  
    opacity: 1; /* 初始透明度 */  
  }  
  
  @keyframes fadeInOut {  
    0%, 100% { opacity: 1; }  
    50% { opacity: 0.5; }  
  }  

动画效果通过文字的透明度实现，整个过程2s，到1s的时候会变成一般的透明度，这样就简单的实现了；

2.三个点加载中样式

每一个点的动画是一样的，只不过每一个点会有不同的延迟执行的时间，这样就实现加载中的效果。

<span className='dots'>
	<span>.</span>
	<span>.</span>
	<span>.</span>
</span>

.dots {
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    margin-top: -10px;
}

@keyframes dotAppear {
    0% {
        opacity: 0;
    }
    33% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.dots span {
    display: inline-block;
    padding-right: 1px;
    animation: dotAppear 1.5s infinite;
}

.dots span:nth-child(1) {
    animation-delay: 0s;
}

.dots span:nth-child(2) {
    animation-delay: 0.5s;
}

.dots span:nth-child(3) {
    animation-delay: 1s;
}