使用-CSS3-實(shí)現(xiàn)超炫的-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(