<div class="center">
<div class="dunpai">dunpai</div>
<div class="his1">his1</div>
<div class="his2">his2</div>
<div class="his3">his3</div>
<div class="car">car</div>
<div class="clock">clock</div>
</div>
.dunpai {
position: absolute;
height: 400px;
width: 300px;
border: 1px solid #ffffff;
top: 12px;
left: 45px;
animation-name: dunpai1;
animation-direction: alternate;
animation-duration: 6s;
animation-iteration-count: infinite;
}
@keyframes dunpai1 {
0% {
left: -85px;
}
100% {
left: 85px;
}
}
.his1 {
position: absolute;
height: 400px;
width: 300px;
border: 1px solid #ffffff;
animation-name: his11;
animation-direction: alternate;
animation-duration: 6s;
animation-iteration-count: infinite;
top: 400px;
}
@keyframes his11 {
0% {
transform: rotate(0.2turn);
}
100% {
transform: rotate(0.9turn);
}
}
.his2 {
position: absolute;
height: 400px;
width: 300px;
border: 1px solid #ffffff;
top: 480px;
animation-name: his12;
animation-direction: alternate;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes his12 {
0% {
top: 480px;
}
100% {
top: 680px;
}
}
.his3 {
position: absolute;
height: 400px;
width: 300px;
border: 1px solid #ffffff;
top: 480px;
left: 99px;
animation-name: his12;
animation-direction: alternate;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
.car {
position: absolute;
height: 400px;
width: 300px;
top: 480px;
left: 120px;
border: 1px solid #ffffff;
animation-name: car1;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes car1 {
0% {
top: 0px;
left: 480px;
transform: rotate(1turn);
}
25% {
top: 480px;
left: 120px;
transform: rotate(1turn);
}
50% {
top: 480px;
left: 120px;
transform: rotate(0.5turn);
}
75% {
top: 0px;
left: 480px;
transform: rotate(0.5turn);
}
100% {
top: 0px;
left: 480px;
transform: rotate(1turn);
}
}
.clock {
position: absolute;
height: 400px;
width: 300px;
border: 1px solid #ffffff;
animation-name: clock1;
animation-duration: 7200s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes clock1 {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(1turn);
}
}