css3实现无缝滚动效果

复制代码
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 @keyframes move
 8 {
 9     0%
10     {
11         transform:translateX(0px);
12     }
13     100%
14     {
15         transform:translateX(-500px);
16     }
17 }
18 ul{margin:0;padding:0; list-style:none;}
19 .picTab{width:500px;height:100px;border:2px solid #000; margin:50px auto; 
20 
21 overflow:hidden;}
22 .picTab ul{width:1000px;height:100px; animation:move 5s linear infinite;}
23 .picTab li
24 
25 {margin:1px;float:left;width:98px;height:98px;background:#000;color:#fff; 
26 
27 font:50px/98px "宋体"; text-align:center;}
28 .picTab:hover ul{ animation-play-state:paused;}
29 </style>
30 </head>
31 <body>
32 <section class="picTab">
33     <ul>
34         <li>1</li>
35         <li>2</li>
36         <li>3</li>
37         <li>4</li>
38         <li>5</li>
39         <li>1</li>
40         <li>2</li>
41         <li>3</li>
42         <li>4</li>
43         <li>5</li>
44     </ul>
45 </section>
46 </body>
47 </html>
复制代码

效果图:

posted @   待繁华落尽  阅读(5286)  评论(1编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析

喜欢请打赏

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示