代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{position: relative;margin: 100px;} #box span{ display: block; width: 9px; height: 5px; position: absolute; bottom: 0; background-color: #9b59b6; -webkit-animation:preloader 1.0s infinite ease-in-out; } #box span:nth-child(2){left: 11px;-webkit-animation-delay:0.2s;} #box span:nth-child(3){left: 22px;-webkit-animation-delay:0.4s;} #box span:nth-child(4){left: 33px;-webkit-animation-delay:0.6s;} #box span:nth-child(5){left: 44px;-webkit-animation-delay:0.8s;} @-webkit-keyframes preloader{ 0%{height: 5px;transform:translateY(0px);background-color: #9b59b6;} 25%{height: 35px;transform:translateY(15px);background-color: #3498db;} 50%{height: 5px;transform:translateY(0px);background-color: #9b59b6;} 100%{height: 5px;transform:translateY(0px);background-color: #9b59b6;} } </style> </head> <body> <div id="box"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
效果图：
