css3加载

CSS.zh-loading{position:absolute;z-index:9;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.75);}.zh-loadingul{position:absolute;z-index:2;left:50%;top:50%;height:60px;overflow:hidden;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}.zh-loadingulli{float:left;height:100%;width:4px;margin:02px;background-color:#ccc;-webkit-animation:stretchdelay1.2sinfiniteease-in-out;animation:stretchdelay1.2sinfiniteease-in-out;}.zh-loadingulli:nth-of-type(2){-webkit-animation-delay:-1.1s;animation-delay:-1.1s;}.zh-loadingulli:nth-of-type(3){-webkit-animation-delay:-1.0s;animation-delay:-1.0s;}.zh-loadingulli:nth-of-type(4){-webkit-animation-delay:-0.9s;animation-delay:-0.9s;}@-webkit-keyframesstretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}@keyframesstretchdelay{0%,40%,100%{变换:scaleY(0.4);-webkit-transform:scaleY(0.4);}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0);}}效果二@keyframesload{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}#load{width:200px;height:200px;animation:load1slinearinfinite;transform-origin:center中心;}