使用_CSS3_实现超炫的_Loading(加载)动画效果.doc

3、e:10px;} .spinner>div{  background-color:#67CF22;  height:100%;  width:6px;  display:inline-block;     -webkit-animation:stretchdelay1.2sinfiniteease-in-out;  animation:stretchdelay1.2sinfiniteease-in-out;} .spinner.rect2{  -webkit-animation-delay:-1.1s;  animatio

4、n-delay:-1.1s;} .spinner.rect3{.专业.专注..word格式.25262728293031323334353637383940414243444546474849505152  -webkit-animation-delay:-1.0s;  animation-delay:-1.0s;} .spinner.rect4{  -webkit-animation-delay:-0.9s;  animation-delay:-0.9s;} .spinner.rect5{  -webkit-animat

5、ion-delay:-0.8s;  animation-delay:-0.8s;} @-webkit-keyframesstretchdelay{  0%,40%,100%{-webkit-transform:scaleY(0.4)}   20%{-webkit-transform:scaleY(1.0)}} @keyframesstretchdelay{  0%,40%,100%{    transform:scaleY(0.4);    -webkit-transform:scaleY(0.4);  } 20%{   

6、 transform:scaleY(1.0);    -webkit-transform:scaleY(1.0);  }}Loading动画效果二  HTML代码：?1CSS代码：?123456789101112131415161718192021222324252627.spinner{  width:60px;  height:60px;  background-color:#67CF22;   margin:100pxauto;  -webkit-animation

7、:rotateplane1.2sinfiniteease-in-out;  animation:rotateplane1.2sinfiniteease-in-out;} @-webkit-keyframesrotateplane{  0%{-webkit-transform:perspective(120px)}  50%{-webkit-transform:perspective(120px)rotateY(180deg)}  100%{-webkit-transform:perspective(120px)rotate

8、Y(180deg) rotateX(180deg)}} @keyframesrotateplane{  0%{    transform:perspective(120px)rotateX(0deg)rotateY(0deg);    -webkit-transform:perspective(120p