使用-CSS3-实现超炫的-Loading(加载)动画效果.docx

3、:#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;  animation-delay:-1.1s;} .spinner.rect3{2526272829303132333435363

4、7383940414243444546474849505152  -webkit-animation-delay:-1.0s;  animation-delay:-1.0s;} .spinner.rect4{  -webkit-animation-delay:-0.9s;  animation-delay:-0.9s;} .spinner.rect5{  -webkit-animation-delay:-0.8s;  animation-delay:-0.8s;} @-webkit-keyframesstretchdelay{  0%,40%,100%{

5、-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%{    transform:scaleY(1.0);    -webkit-transform:scaleY(1.0);  }}Loading动画效果二  HTML代码：?1

6、>CSS代码：?123456789101112131415161718192021222324252627.spinner{  width:60px;  height:60px;  background-color:#67CF22;   margin:100pxauto;  -webkit-animation:rotateplane1.2sinfiniteease-in-out;  animation:rotateplane1.2sinfiniteease-in-out;} @-webkit-keyframesrotateplane{  0%

7、{-webkit-transform:perspective(120px)}  50%{-webkit-transform:perspective(120px)rotateY(180deg)}  100%{-webkit-transform:perspective(120px)rotateY(180deg) rotateX(180deg)}} @keyframesrotateplane{  0%{    transform:perspective(120px)rotateX(0deg)rotateY(0deg);    -webkit-transform

8、:perspective(120px)rotateX(0deg)rotateY(