**HTML**
<div class="box">
<div>2位学号姓名</div>
<div>2位学号姓名</div>
<div>2位学号姓名</div>
</div>
<div class="box1"></div>
**CSS**
*{
margin: 0;
padding: 0;
box-sizing: border-box;
transition: all 0.5s ease-out;
}
.box{
width: 1580px;
height: 210px;
margin: auto;
margin-top: 50px;
}
.box div:nth-child(1){
background-color: red;
}
.box div:nth-child(2){
background-color: dodgerblue;
}
.box div:nth-child(3){
background-color: green;
}
@keyframes circleRoate{
0%{
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
50%{
transform: translateX(610px);
-webkit-transform: translateX(610px);
}
100%{
transform: translateX(0%);
-webkit-transform: translateX(0%);
}
}
.box div{
width: 300px;
height: 200px;
font-size: 30px;
float: left;
text-align: center;
color: white;
line-height: 200px;
animation: circleRoate 5s infinite linear;
-webkit-animation: circleRoate 5s infinite linear;
}
.box1{
width: 310px;
height: 210px;
margin: auto;
position: fixed;
top: 6%;
left: 38%;
border: 6px solid darkgray;
}