<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css等待特效</title> </head> <style type="text/css"> .load-cube-grid { width:40px; height:40px; } /*ease-in-out 以慢速开始和结束的过渡效果*/ .load-cube-grid .load-cube { width:33.33%; height:33.33%; background-color:skyblue; float:left; animation:load-cubeAnimate 1.5s infinite ease-in-out; } .load-cube-grid .load-cube1 { -webkit-animation-delay:0.2s; animation-delay:0.2s; } .load-cube-grid .load-cube2 { -webkit-animation-delay:0.3s; animation-delay:0.3s; } .load-cube-grid .load-cube3 { -webkit-animation-delay:0.4s; animation-delay:0.4s; } .load-cube-grid .load-cube4 { -webkit-animation-delay:0.1s; animation-delay:0.1s; } .load-cube-grid .load-cube5 { -webkit-animation-delay:0.2s; animation-delay:0.2s; } .load-cube-grid .load-cube6 { -webkit-animation-delay:0.3s; animation-delay:0.3s; } .load-cube-grid .load-cube7 { -webkit-animation-delay:0.0s; animation-delay:0.0s; } .load-cube-grid .load-cube8 { -webkit-animation-delay:0.1s; animation-delay:0.1s; } .load-cube-grid .load-cube9 { -webkit-animation-delay:0.2s; animation-delay:0.2s; } /*scale3D X、Y、Z方向上 3D缩放效果 */ @keyframes load-cubeAnimate { 0%{ -webkit-transform:scale3D(1,1,1); transform:scale3D(1,1,1); } 50% { -webkit-transform:scale3D(0,0,1); transform:scale3D(0,0,1); } 100% { -webkit-transform:scale3D(1,1,1); transform:scale3D(1,1,1); } } </style> <body> <div class="load-cube-grid"> <div class="load-cube load-cube1"></div> <div class="load-cube load-cube2"></div> <div class="load-cube load-cube3"></div> <div class="load-cube load-cube4"></div> <div class="load-cube load-cube5"></div> <div class="load-cube load-cube6"></div> <div class="load-cube load-cube7"></div> <div class="load-cube load-cube8"></div> <div class="load-cube load-cube9"></div> </div> </body> </html>
效果: