如何只用CSS完成漂亮的加载

&::before,

&::after {

content: '';

position: absolute;

width: 100%;

height: 100%;

box-sizing: border-box;

border: 4px solid transparent;

}

&::before {

top: 0;

left: 0;

border-top-color: black;

border-right-color: black;

}

&::after {

bottom: 0;

right: 0;

border-bottom-color: red; // Red for demo purposes only

border-left-color: red;

}

如今效不雅长如许

接下来, 我们就用 keyframe 做 div.logo::before 的第一个动画

我们将 width 和 height 初始都为 0, 然后用 keyframe 将 width 和

height 调剂到 100%

div.logo { 
 
  &::before, 
 
  &::after { 
 
    /* ... */ 
 
    animation-timing-function: linear; 
 
  } 
 
  &::before { 
 
    /* ... */ 
 
    animation: border-before 1.5s infinite; 
 
    animation-direction: alternate; 
 
  } 
 
} 
 
@keyframes border-before { 
 
	
			 3/4   首页 上一页 1 2 3 4 下一页 尾页	
			

　　推荐阅读
　　老网工: 浅谈SDN技术的部署和未来
            【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索

            
                
                    
                
                进入2017年，基于SDN的解决筹>>>详细阅读


本文标题：如何只用CSS完成漂亮的加载
地址：http://www.17bianji.com/lsqh/36778.html
 1/2    1