代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{position: relative;margin: 100px;} #box span{ display: block; width: 20px; height: 20px; position: absolute; background-color: #3498db; opacity: 0.5; border-radius: 50%; -webkit-animation:preloader 1s infinite ease-in-out; } #box span:nth-child(2){left: 20px;-webkit-animation-delay:0.2s;} #box span:nth-child(3){left: 40px;-webkit-animation-delay:0.4s;} #box span:nth-child(4){left: 60px;-webkit-animation-delay:0.6s;} #box span:nth-child(5){left: 80px;-webkit-animation-delay:0.8s;} @-webkit-keyframes preloader{ 0%{opacity: 0.3;-webkit-transform:translateY(0px);box-shadow: 0px 0px 3px rgba(0,0,0,0.1);} 50%{opacity: 1;-webkit-transform:translateY(-10px);box-shadow: 0px 20px 3px rgba(0,0,0,0.05);background-color: #f1c40f;} 100%{opacity: 0.3;-webkit-transform:translateY(0px);box-shadow: 0px 0px 3px rgba(0,0,0,0.1);} } </style> </head> <body> <div id="box"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
效果图：
