.loading { background:#000; width:100%; height:100%; position:absolute; left:0; top:0; z-index:99999 } .loadingBox { position:absolute; left:0; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); text-align:center; width:100%; } .loadingBox p,span[class*=l-] { text-align:center; font:30px/40px arial } span[class*=l-] { height:30px; width:30px; display:inline-block; margin:24px 4px; color:#fff; border-radius:100%; -webkit-border-radius:100%; animation:loader 4s cubic-bezier(.030,.615,.995,.415) infinite both; -webkit-animation:loader 4s cubic-bezier(.030,.615,.995,.415) infinite both; } @-webkit-keyframes loader { 0% { -webkit-transform:translate3d(-60px,0,0); transform:translate3d(-60px,0,0); opacity:0 } 25% { opacity:1 } 50% { -webkit-transform:translate3d(60px,0,0); transform:translate3d(60px,0,0); opacity:0; } 100% { opacity:0 } }@keyframes loader { 0% { -webkit-transform:translate3d(-60px,0,0); transform:translate3d(-60px,0,0); opacity:0 } 25% { opacity:1 } 50% { -webkit-transform:translate3d(60px,0,0); transform:translate3d(60px,0,0); opacity:0 } 100% { opacity:0 } }span.l-1 { -webkit-animation-delay:1.2s; animation-delay:1.2s; color:red } span.l-2 { -webkit-animation-delay:1s; animation-delay:1s } span.l-3 { -webkit-animation-delay:.8s; animation-delay:.8s } span.l-4 { -webkit-animation-delay:.6s; animation-delay:.6s } span.l-5 { -webkit-animation-delay:.4s; animation-delay:.4s; color:red } span.l-6 { -webkit-animation-delay:.2s; animation-delay:.2s } span.l-7 { -webkit-animation-delay:0s; animation-delay:0s }
加载动画 , 使用场景: 代码没有加载完成的加载页