2023-02-25  2024-09-18    79 字  1 分钟
CSS

<div class="wheelPlayer wheelAnimate">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
.wheelPlayer{
   padding: 20px 0;
   margin: auto;
   width: 350px;
}
.wheelPlayer div{
   position: relative;
   height: 25px;
   line-height: 26px;
   width: 70px;
   text-align: center;
   border: 1px solid gray;
}
.wheelAnimate div{
   animation: whellPlayer 9s infinite;
   -moz-animation: whellPlayer 9s infinite;
   -webkit-animation: whellPlayer 9s infinite;
}
.wheelPlayer div:nth-of-type(1){
   animation-delay: -6s;
   -moz-animation-delay: -6s;
   -webkit-animation-delay: -6s;
}
.wheelPlayer div:nth-of-type(2){
   animation-delay: -3s;
   -moz-animation-delay: -3s;
   -webkit-animation-delay: -3s;
   margin-top:  -27px;
}
.wheelPlayer div:nth-of-type(3){
   animation-delay: -0s;
   -moz-animation-delay: 0s;
   -webkit-animation-delay: 0s;
   margin-top:  -27px;
}