css 纯css轮播图 示例

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>纯css动画实现轮播图展示</title>
 6         <link rel="stylesheet" charset="utf-8" href="style.css" />
 7         <style>
 8         @keyframes move{
 9             0%{
10                 transform:translateX(0%);
11             }
12             20%{
13                 transform:translateX(0%);
14             }
15             25%{
16                 transform:translateX(-500px);
17             }
18             45%{
19                 transform:translateX(-500px);
20             }
21             50%{
22                 transform:translateX(-1000px);
23             }
24             70%{
25                 transform:translateX(-1000px);
26             }
27             75%{
28                 transform:translateX(-1500px);
29             }
30             95%{
31                 transform:translateX(-1500px);
32             }
33             100%{
34                 transform:translateX(-2000px);
35             }
36  
37         }
38         .wrap{
39             width:500px; height:320px;
40             position:relative; margin:50px auto;
41             border:5px solid #f00;
42             overflow:hidden;
43         }
44         ul,li{margin:0; padding:0; list-style:none;}
45         img{vertical-align: top; border:none;}
46         .list{width:500%;  animation: move 7s linear infinite}
47         .list li{float:left; width:500px; height:320px;}
48         .list img{width:100%; height:100%;}
49     </style>
50 
51     </head>
52     <body>
53         <!-- <div id="boxId" class="boxClass">
54             <canvas id = "canvasId" width = 500 height = 500></canvas>
55         </div>
56         <script type = "text/javascript" src = "main.js" ></script> -->
57         
58     <div class="wrap">
59         <ul class="list">
60             <li><img src="0-1.png" alt=""/></li>
61             <li><img src="0-3.png" alt=""/></li>
62             <li><img src="0-4.png" alt=""/></li>
63             <li><img src="0-6.png" alt=""/></li>
64             <li><img src="0-7.png" alt=""/></li>
65         </ul>
66     </div>
67     </body>
68 </html>
复制代码

 

posted @   鸡儿er  阅读(226)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手