纯css实现列表的无限滚动 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7     <title>Document</title>
 8     <style>
 9       #wrap {
10         width: 100px;
11         height: 100px;
12         border: 1px solid #000;
13         position: relative;
14         margin: 100px auto;
15         overflow: hidden;
16       }
17 
18       #list {
19         width: 100px;
20         position: absolute;
21         left: 0;
22         top: 0;
23         margin: 0;
24         padding: 0;
25         -webkit-animation: 5s move infinite linear;
26       }
27 
28       #list li {
29         width: 100%;
30         height: 98px;
31         background: #000;
32         color: #fff;
33         border: 1px solid #fff;
34         line-height: 98px;
35         text-align: center;
36       }
37 
38       #wrap:hover #list {
39         -webkit-animation-play-state: paused;
40       }
41       @-webkit-keyframes move {
42         0% {
43           transform: translateY(0);
44         }
45         100% {
46           transform: translateY(-50%);
47         }
48       }
49     </style>
50   </head>
51 
52   <body>
53     <div id="wrap">
54       <ul id="list"></ul>
55     </div>
56   </body>
57   <script>
58     const defaultArr = [1, 2, 3, 4, 5]
59     arr = [...defaultArr, ...defaultArr]
60     const ul = document.getElementById('list')
61     arr.forEach((item) => {
62       const li = document.createElement('li')
63       li.innerText = item
64       ul.appendChild(li)
65     })
66   </script>
67 </html>

无 JS 实现, 无插件实现。

posted @ 2025-05-29 16:19  等风来灬  阅读(43)  评论(0)    收藏  举报