<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
 <title>CSS3实现加载的动画效果7</title>
 <meta name="author" content="rainna" />
 <meta name="keywords" content="rainna's css lib" />
 <meta name="description" content="CSS3" />
 <style>
 *{margin:0;padding:0;}
 body{background:#e2e2e2;}
 .m-load{width:240px;height:240px;margin:100px auto;background:url('load.png') center center no-repeat;}
 
 /** 加载动画的静态样式 **/
 .m-load2{position:relative;width:95px;height:95px;margin:100px auto;border-radius:44px;overflow:hidden;}
 .m-load2:before,.m-load2:after,.m-load2 .item{float:left;width:50%;height:50%;}
 .m-load2:before{content:'';background:#e36767;}
 .m-load2:after{content:'';background:#6BB9DD;}
 .m-load2 .item:nth-child(1){background:#F6CB7D;}
 .m-load2 .item:nth-child(2){background:#6BA374;}
 .m-load2 .circle{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;background:#e2e2e2;border-radius:28px;}
 .m-load2 .circle:before{content:'';position:absolute;left:2%;top:20%;width:0;height:0;overflow:hidden;border-top:18px solid #CCC;border-left:18px solid #ccc;border-right:18px solid transparent;border-bottom:18px solid transparent;-webkit-transform:rotate(135deg) skew(12deg,12deg);}
 
 /** 加载动画 **/
 @-webkit-keyframes load{
     0%{background:#e36767;}
     24.9%{background:#e36767;}
     25%{background:#F6CB7D;}
     49.9%{background:#F6CB7D;}
     50%{background:#6BB9DD;}
     74.9%{background:#6BB9DD;}
     75%{background:#6BA374;}
     99.9%{background:#6BA374;}
 }
 .m-load2:before{-webkit-animation:load 1s linear infinite;}
 .m-load2 .item:nth-child(1){-webkit-animation:load 1s linear .25s infinite;}
 .m-load2:after{-webkit-animation:load 1s linear .5s infinite;}
 .m-load2 .item:nth-child(2){-webkit-animation:load 1s linear .75s infinite;}
 </style>
 </head>
 
 <body>
 <div class="m-load"></div>
 
 <div class="m-load2">
     <div class="item"></div>
     <div class="item"></div>
     <div class="circle"></div>
 </div>
 </body>
 </html>