css3绘制某网站loading动画

    
    
    
 

 .container{
     margin:120px auto;
     width: 300px;
     height: 300px;
     position: relative;
 }
 .circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     border: 1px solid #eeeeee;
     position: absolute;
 }
 #one{
     background-color: #2DCB70;
     left: 0;
     top: 0;
     animation: move1 3s ease-in-out infinite;
 }
 @keyframes move1 {
     0%{transform: translateX(0) translateY(0)}
     50%{transform: translateX(200px) translateY(200px)}
     100%{transform: translateX(0) translateY(0)}
 }
#two{
     background-color: red;
     right: 0;
     top: 0;
     animation: move2 3s ease-in-out infinite;
 }
 @keyframes move2 {
     0%{transform: translateX(0) translateY(0)}
     50%{transform: translateX(-200px) translateY(200px)}
     100%{transform: translateX(0) translateY(0)}
 }
 #three{
     background-color: yellow;
     left: 0;
     bottom: 0;
     animation: move3 3s ease-in-out infinite;
 }
 @keyframes move3 {
     0%{transform: translateX(0) translateY(0)}
     50%{transform: translateX(200px) translateY(-200px)}
     100%{transform: translateX(0) translateY(0)}
 }
 #four{
     background-color: deepskyblue;
     right: 0;
     bottom: 0;
     animation: move4 3s ease-in-out infinite;
 }
 @keyframes move4 {
     0%{transform: translateX(0) translateY(0)}
     50%{transform: translateX(-200px) translateY(-200px)}
     100%{transform: translateX(0) translateY(0)}
 }
    



    
    
    
    

这个动画绘制过程很繁琐，希望各位朋友有简便方法能够分享一下