实例教程 纯CSS3打造非常炫的加载动画效果

2020-05-01 10:18:20易采站长站整理

    width: 186px;   
    height: 186px;   
    border-radius: 50%;   
    z-index: 10;   
}   
  
span.triangle.base {   
    position: absolute;   
    width: 0;    
    height: 0;   
    margin: 46px 0 0 13px;   
    border-left: 80px solid transparent;   
    border-right: 80px solid transparent;                  
    border-top: 140px solid #eeeeee;   
    transform-origin: 50% 50%;   
    z-index: 20;   
}   
  
span.triangle.no1 {   
    position: absolute;   
    margin: 46px 0 0 13px;   
    width: 0;    
    height: 0;    
    border-left: 80px solid transparent;   
    border-right: 80px solid transparent;                  
    border-bottom: 140px solid #eeeeee;   
    transform-origin: 0 100%;   
    z-index: 20;   
}   
  
span.triangle.no2 {   
    position: absolute;   
    margin: 46px 0 0 13px;   
    width: 0;    
    height: 0;    
    border-left: 80px solid transparent;   
    border-right: 80px solid transparent;                  
    border-bottom: 140px solid #eeeeee;   
    transform-origin: 100% 100%;   
    z-index: 20;   
}   
  
span.triangle.no3 {   
    position: absolute;   
    margin: 46px 0 0 13px;