纯CSS实现的Loading效果

￡神魔★判官ぃ 2022-08-25 05:22 262阅读 0赞

纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的[codepen][]看看效果。效果下载链接文章下面。

![SouthEast][]

先来看看实现过程，先看html文件，div.container为效果容器，里面有二十个div,circle。

接着是CSS文件，我们通过LESS循环实现对每个.circle设置不同的大小、不同的动画延迟。

/*
    首先定义几个变量
    盒子的宽和高，@w,@h
    盒子里面圆的数目，@n
    */
    @w:200px;
    @h:200px;
    @n:20;
    /*设置盒子的大小和位置*/
    .container{
      width:@w;
      height:@h;
      position:absolute;
      top:50%;
      left:50%;
      margin:-@w/2 0 0 -@h/2;
    }
    /*设置.circle的通用表现*/
    .circle{
      position:absolute;
      top:50%;
      left:50%;
      transform-origin:center center;
    }
    /*偶数.circle的表现*/
    .circle:nth-child(2n){
      border: 1px dashed #16c;
      box-shadow:0 0 3px #16c;
      animation:oklw 4s ease infinite;
    }
    /*奇数.circle的表现*/
    .circle:nth-child(2n+1){
    	border: 1px solid #c16;
      box-shadow:0 0 3px #c16;
      animation:okrw 6s ease infinite;
    }
    /*设置动画*/
    @keyframes oklw{
      0%{
        transform:rotate(720deg);
      }
      100%{
        transform:rotate(360deg);
      }
    }
    @keyframes okrw{
      0%{
        transform:rotate(0deg);
      }
      100%{
        transform:rotate(720deg);
      }
    }
    /*利用LESS定义循环*/
    .loopingClass (@index) when (@index > 0) {
    	
      //设置每个.circle
    	.circle:nth-child(@{index}) {
    		width:@w*@index/20;
        height:@h*@index/20;
        margin:-@h*@index/40 0 0 -@w*@index/40;
        animation-delay:0.2s*@index;
        z-index:@n - @index;
    	}
    
    	// 下一次的循环
    	.loopingClass(@index - 1);
    }
    //执行到0时，啥都不干，结束循环
    .loopingClass (0) {}
    
    /*调用循环*/
    .loopingClass (@n);

OK，效果完毕。相信大家结合注释应该能看明白，不再具体具体解释代码书写过程，大家可以到codepen在线编辑或下载本[效果][codepen]。

为了简化起见，我们用了prefix free.js和normalize.css。代码里没有列出，需要的童鞋可以单击下载[本效果文件包][Link 1]。

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[codepen]: http://codepen.io/whqet/pen/jKGst
[SouthEast]: /images/20220824/6abc5df7725a4836b480896ba053ced0.png
[Link 1]: http://codepen.io/whqet/share/zip/jKGst
[whqet]: http://blog.csdn.net/whqet