代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ position: relative; width: 40px; height: 40px; margin: 100px; } #box span{ display: block; width: 20px; height: 20px; position: absolute; bottom: 0; background-color: #9b59b6; } #box span:nth-child(1){-webkit-animation:preloader1 1.5s infinite ease-in-out;} #box span:nth-child(2){-webkit-animation:preloader2 1.5s infinite ease-in-out;left: 20px;} #box span:nth-child(3){-webkit-animation:preloader3 1.5s infinite ease-in-out;top: 0px;} #box span:nth-child(4){-webkit-animation:preloader4 1.5s infinite ease-in-out;top: 0px;left: 20px;} @-webkit-keyframes preloader1{ 0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;} 50%{transform:translateX(-20px) translateY(-10px) rotate(-180deg);border-radius: 20px;background-color: #3498db;} 80%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} 100%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-webkit-keyframes preloader2{ 0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;} 50%{transform:translateX(20px) translateY(-10px) rotate(180deg);border-radius: 20px;background-color: #f1c40f;} 80%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} 100%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} } @-webkit-keyframes preloader3{ 0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;} 50%{transform:translateX(-20px) translateY(10px) rotate(-180deg);border-radius: 20px;background-color: #2ecc71;} 80%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} 100%{transform:translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-webkit-keyframes preloader4{ 0%{transform:translateX(0px) translateY(0px) rotate(0deg);border-radius: 0px;} 50%{transform:translateX(20px) translateY(10px) rotate(180deg);border-radius: 20px;background-color: #e74c3c;} 80%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} 100%{transform:translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} } </style> </head> <body> <div id="box"> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
效果图：
