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

1<div class="wheelPlayer wheelAnimate">
2    <div>1</div>
3    <div>2</div>
4    <div>3</div>
5</div>
 1.wheelPlayer{
 2   padding: 20px 0;
 3   margin: auto;
 4   width: 350px;
 5}
 6.wheelPlayer div{
 7   position: relative;
 8   height: 25px;
 9   line-height: 26px;
10   width: 70px;
11   text-align: center;
12   border: 1px solid gray;
13}
14.wheelAnimate div{
15   animation: whellPlayer 9s infinite;
16   -moz-animation: whellPlayer 9s infinite;
17   -webkit-animation: whellPlayer 9s infinite;
18}
19.wheelPlayer div:nth-of-type(1){
20   animation-delay: -6s;
21   -moz-animation-delay: -6s;
22   -webkit-animation-delay: -6s;
23}
24.wheelPlayer div:nth-of-type(2){
25   animation-delay: -3s;
26   -moz-animation-delay: -3s;
27   -webkit-animation-delay: -3s;
28   margin-top:  -27px;
29}
30.wheelPlayer div:nth-of-type(3){
31   animation-delay: -0s;
32   -moz-animation-delay: 0s;
33   -webkit-animation-delay: 0s;
34   margin-top:  -27px;
35}

除另有声明外本博客文章均采用 知识共享 (Creative Commons) 署名 4.0 国际许可协议 进行许可转载请注明原作者与文章出处