CSS--实现小球运动

运行结果：

代码运行之后是动态的。（此图为截图）

<!--html-->
<！--背景设置-->
<div class="bottom">
    <div class="box"></div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="long-box"></div>
    <div class="big-cicle"></div>
    <div class="big-cicle big-cicle0"></div>
    <div class="big-cicle big-cicle1"></div>
    <div class="big-cicle big-cicle2"></div>
    <div class="long-big-box">
        <div class="small-box"></div>
    </div>
    <div class="box3"></div>
</div>
<！--小球设置-->
<div class="small1-box"></div>
<div class="small1-box small1-box0"></div>
<div class="small1-box small1-box1"></div>
<div class="small1-box small1-box2"></div>
<div class="small1-box small1-box3"></div>
<div class="small1-box small1-box4"></div>
<div class="small1-box small1-box5"></div>
<div class="small1-box small1-box6"></div>
<div class="small1-box small1-box7"></div>
<div class="small1-box small1-box8"></div>
<div class="small1-box small1-box9"></div>

*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #85978e;
}
.bottom{
    width: 100%;
    height: 100px;
    background-color: #363337;
    position: relative;
    margin: 453px 0 0;
    box-shadow: 0 30px #464247;

}
.box{
    width: 50px;
    height: 50px;
    background-color: #363337;
    position: absolute;
    top: -118px;
    right: 463px;
    box-shadow:-10px 0px #464247;
    border-top: 4px solid #464247;
}
.box1{
    right: 411px;
    border-left: 2px solid #464247;
    box-shadow: none;
}
.box2{
    right: 359px;
    border-left: 2px solid #464247;
    box-shadow: 0 -4px #464247;
    border-top: 0;
    top: -114px;
}
.long-box{
    width: 100px;
    height: 168px;
    background-color: #3a2c3d;
    box-shadow: -12px -8px #3f3441;
    position: absolute;
    top: -190px;
    left: -59px;
    transform-origin:bottom;
    transform: rotate(90deg);
}
.big-cicle{
    width: 43px;
    height: 40px;
    background-color: #464247;
    position: absolute;
    top: 20px;
    left: 900px;
    border-radius: 50px 50px 10px 10px;
    border:1px solid #3a2c3d;
}
.big-cicle0{
    left: 856px;
}
.big-cicle1{
    left: 813px;
}
.big-cicle1{
    left: 770px;
}
.big-cicle2{
    left: 726px;
}
.long-big-box{
    width: 50px;
    height: 334px;
    background-color: #3a2c3d;
    position: absolute;
    top: -283px;
    left: 323px;
    box-shadow: 8px -6px #3f3441;
}
.small-box{
    width:9px;
    height:6px;
    background-color: #3f3441;
    position: absolute;
    top: -4px;
    left: 2px;
    transform:rotate(-47deg);
}
.box3{
    width: 100px;
    height:100px;
    background-color:#3a2c3d ;
    position: absolute;
    top: -41px;
    right:-14px;
    box-shadow: -13px -10px #3f3441;
}
.small1-box{
    width: 20px;
    height: 20px;
    background-color: #40c0af;
    border-radius: 50%;
    position: absolute;
    animation: s1-box 5s linear infinite ;
}
.small1-box0{
    background-color: #9dea23;
    animation: s2-box 6s linear infinite ;
}
.small1-box1{
    background-color: #fff;
    animation: s3-box 4s linear infinite ;

}
.small1-box2{
    background-color: #ea234d;
    animation: s4-box 7s linear infinite ;
}
.small1-box3{
    background-color: #eae823;
    animation: s4-box 4s linear infinite ;
}
.small1-box4{
    background-color: #eaa123;
    animation: s6-box 3s linear infinite ;
}
.small1-box5{
    background-color: #ea237c;
    animation: s7-box 5s linear infinite ;
}
.small1-box6{
    background-color: #655b60;
    animation: s8-box 4s linear infinite ;
}
.small1-box7{
    background-color: #5722df;
    animation: s9-box 5s linear infinite ;
}
.small1-box8{
    background-color: #df5322;
    animation: s10-box 7s linear infinite ;
}
.small1-box9{
    background-color: #22df7b;
    animation: s11-box 3s linear infinite ;
}
@keyframes s1-box {
    0%{
        left: 0;
        top: 0;
    }
    25%{
         top: 370px;
            left: 108px;
    }
    50%{
        left: 443px;
        top: 0px;
    }
    75%{
            left: 745px;
            top: 470px;
    }
   100%{
      left: 100%;
      top: 0px;
   }
}
@keyframes s2-box {
    0%{
        right: 0;
        top: 0;
    }
    25%{
        top: 400px;
        right: 68px;
    }
    50%{
        right: 443px;
        top: 0px;
    }
    75%{
        right: 745px;
        top: 470px;
    }
    100%{
        right: 80%;
        top: 0px;
    }
}
@keyframes s3-box {
    0%{
        left: 0;
        top: 200px;
    }
    25%{
        top: 370px;
        left: 68px;
    }
    50%{
        left: 300px;
        top: 0px;
    }
    75%{
        left: 900px;
        top: 470px;
    }
    100%{
        left: 80%;
        top: 0px;
    }
}
@keyframes s4-box {
    0%{
        left: 0;
        top: 200px;
    }
    25%{
        top: 370px;
        left: 68px;
    }
    50%{
        left: 300px;
        top: 0px;
    }
    75%{
        left: 900px;
        top: 470px;
    }
    100%{
        left: 100%;
        top: 0px;
    }
}
@keyframes s5-box {
    0%{
        left: 0;
        top: 150px;
    }
    /*25%{*/
    /*    top: 370px;*/
    /*    left: 68px;*/
    /*}*/
    50%{
        left: 300px;
        top: 0px;
    }
    75%{
        left: 900px;
        top: 470px;
    }
    100%{
        left: 100%;
        top: 0px;
    }
}
@keyframes s6-box {
    0%{
        right: 0;
        top: 0px;
    }
    25%{
        top: 400px;
        right: 75px;
    }
    50%{
        right: 443px;
        top: 0px;
    }
    75%{
        right: 745px;
        top: 470px;
    }
    100%{
        right:100%;
        top: 100px;
    }
}
@keyframes s7-box {
    0%{
        right: 0;
        top: 20px;
    }
    25%{
        top: 400px;
        right: 68px;
    }
    50%{
        right: 443px;
        top: 0px;
    }
    75%{
        right: 745px;
        top: 470px;
    }
    100%{
        right: 100%;
        top: 50px;
    }
}
@keyframes s8-box {
    0%{
        right:100px;
        top: 0px;
    }
    25%{
        top: 400px;
        right: 68px;
    }
    50%{
        right: 443px;
        top: 0px;
    }
    75%{
        right: 745px;
        top: 470px;
    }
    100%{
        right: 100%;
        top: 157px;
    }
}
@keyframes s9-box {
    0%{
        right: 0;
        top: 150px;
    }
    25%{
        top: 400px;
        right: 68px;
    }
    50%{
        right: 443px;
        top: 0px;
    }
    75%{
        right: 745px;
        top: 470px;
    }
    100%{
        right: 90%;
        top: 0px;
    }
}
@keyframes s10-box {
    0%{
        right: 0;
        top: 150px;
    }
    25%{
        top: 400px;
        right: 68px;
    }
    50%{
        right: 443px;
        top: 0px;
    }
    75%{
        right: 745px;
        top: 470px;
    }
    100%{
        right: 90%;
        top: 0px;
    }
}
@keyframes s11-box {
    0%{
        left: 200px;
        top: 0px;
    }
    25%{
        top:159px;
        left: 357px;
    }
    50%{
        left: 700px;
        top: 0px;
    }
    75%{
        right: 105px;
        top: 321px;
    }
    100%{
        left: 90%;
        top: 0px;
    }
}