使用css实现loading的加载

使用css实现loading的加载的效果图

html代码

     <div id="caseVerteClaire">
         <div id="transform">
           <div id="transform1"></div>
           <div id="transform2"></div>
           <div id="transform3"></div>
         </div>
          <div id="load">
           <p>loading</p>
         </div>
       </div>

css代码

    #caseVerteClaire {
   background-color : #C9F76F;
   height : 140px;
   width : 150px;
   padding-top : 10px;
   float : left;
   position : relative;
 }
 #caseVerteClaire #load {
   color : #444444;
   font-family : calibri;
   text-align : center;
   position : absolute;
   top : 42px;
   left :42px;
 }
 #tranform {
   position : absolute;
   top : 85px;
   left : 30px;
 }

 #transform1 {
   height : 30px;
   width : 30px;
   border-radius : 50%;
   background-color : #444444;
   position : absolute;
   top : 85px;
   left : 15px;
   opacity :;
   animation : transform 4s infinite;
   -webkit-animation : transform 4s infinite;
 }

 #transform2 {
   height : 30px;
   width : 30px;
   border-radius : 50%;
   background-color : #444444;
   position : absolute;
   top : 85px;
   left : 54px;
   opacity :;
   animation : transform 4s infinite;
   -webkit-animation : transform 4s infinite;
   animation-delay : 0.5s;
   -webkit-animation-delay : 0.5s;
 }

 #transform3 {
   height : 30px;
   width : 30px;
   border-radius : 50%;
   background-color : #444444;
   position : absolute;
   top : 85px;
   left : 94px;
   opacity :;
   animation : transform 4s infinite;
   -webkit-animation : transform 4s infinite;
   animation-delay : 1s;
   -webkit-animation-delay : 1s;
 }

 @-webkit-keyframes transform {
   0% {opacity :;}
   25% {opacity :;}
   50% {opacity :;}
   75% {opacity :;}
   100% {opacity :;}
 }

 @keyframes transform {
   0% {border-radius : 0px; opacity :;}
   20% {border-radius : 0px; opacity :;}
   40% {border-radius : 0px; opacity :;}
   60% {border-radius : 50%; opacity :;}
   80% {border-radius : 50%; opacity :;}
   100% {border-radius : 50%; opacity :;}
 }