纯CSS3实现loading正在加载。。。

　　

　　场景分析：随着我司专职前端切图人员离职，切图的活重新落到我们小组团队成员的日常任务list里面，加上我们小组 7个前端 基本都是后台转的前端 （赶鸭子上架 前端现在需求量大 没办法） 加上自己也将就一年不切图了 （有人专职切图就是好啊，论切图的重要性），日常效率大打折扣。这不 来需求了 不会切图了

　

　　UI让做个动效，嗯 就是这个看着简单的动效 好吧 花了将近一下午

　　废话不多说 开干 上代码先：

　　

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>纯CSS3实现loading正在加载。。。</title>
 </head>
 <style>
 .waiting {
   position: relative;
   width: 69px;
   height: 35px;
   line-height: 35px;
   background: #E4F1FD;
   border-radius: 20px;
   margin-top: 15px;
   margin-left: 15px;
   color: #FFAF32;
 }
 /*这个是每个点的自己的块*/
 .waiting li {
     position: absolute;
     top: 13px;
     width: 10px;
     height: 10px;
     line-height: 10px;
     list-style: none;
     -webkit-animation: bounce_waiting 1.2s linear infinite;
     -webkit-transform: scale(0);
     -webkit-border-radius: 5px;
     animation: bounce_waiting 1.2s linear infinite;
     transform: scale(0);
     border-radius: 5px;
 }
 .waiting li:first-child {
     left: 15px;
     -webkit-animation-delay: 0.48s;
     animation-delay: .48s;
 }
 .waiting li:nth-child(2) {
     left: 30px;
     -webkit-animation-delay: 0.6s;
     animation-delay: 0.6s;
 }
 .waiting li:nth-child(3) {
     left: 45px;
     -webkit-animation-delay: 0.72s;
     animation-delay: 0.72s;
 }

 /*定义动画函数，从1倍减小到0*/
 @-webkit-keyframes bounce_waiting {
      0% {
         -webkit-transform:scale(1);
         background-color:#FFAF32;
     }
      100% {
         -webkit-transform:scale(0);
         background-color:#ffffff;
     }
 }
 @keyframes bounce_waiting {
      0% {
         transform:scale(1);
         background-color:#FFAF32;
     }
      100% {
         transform:scale(0);
         background-color:#ffffff;
     }
 }
 </style>
 <body>
     <div class="waiting">
         <ul>
             <Li></Li>
             <Li></Li>
             <Li></Li>
         </ul>
     </div>
 </body>
 </html>    

　　从代码里 我们可以看到 其实实现原理很简单

　　用到了CSS3的 transform animation 属性 嗯 就是这样

　　运用CSS3的animation 和 transform 属性我们其实可以实现很多简单的动效 后续有类似的再继续分享～