父级元素 logo, 不合色彩的方块都是它的子元素

<div class="logo"> 
 
  <div class="white"></div> 
 
  <div class="orange"></div> 
 
  <div class="red"></div> 
 
</div>  

红色小方框 keyframe 如下

我们用 less 来实现

.logo { 
 
  position: relative; 
 
  width: 100px; 
 
  height: 100px; 
 
  border: 4px solid black; 
 
  box-sizing: border-box; 
 
  background-color: white; 
 
  
 
  & > div { 
 
    position: absolute; 
 
  } 
 
  
 
  .red { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 27%; 
 
    border-right: 4px solid black; 
 
    background-color: #EA5664; 
 
  } 
 
  /* Similar code for div.orange and div.white */ 
 
}  

logo 的效不雅图如下

该代码展示了伪元素的初始动画

边框动画

接下来, 我们将进入棘手(有趣)的部分

我们要把四个边框瓜分开来, 然后让它们有序地出现, 所以, 我们可以应用覆盖全部 div 的两个透明的伪元素

废话少说, 就让我们开端吧, 我们先做出它最初始的样子. 我们让 div.logo :: before 绝对位于 div.logo 的左上角，代表方块的上边框和右边框

, 让 div.logo::after 绝对定位 div.logo 的右下角, 代表方块的下边框和左边框

如今, less 代码变成了如许

.logo { 
 
  position: relative; 
 
  width: 100px; 
 
  height: 100px; 
 
  box-sizing: border-box; 
 
  background-color: white; 
 	
			
 2/4   首页 上一页 1 2 3 4 下一页 尾页
	
			

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

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


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