一个简单的纯css轮播图（超级简单）

缺乏、安全感 2023-02-20 02:18 15阅读 0赞

**废话不多说先上图：**  
![轮播图1][1]  
![轮播图2][2]  
说一说原理吧  
让五张图片向左浮动展示。所以只需要左移ul的left值即可。使用animation，每隔几秒切换一下left的位置。  
然后给动画加上重复播放 ，实现循环播放。  
美中不足就是没有小白点  
因为刚刚学习了3个月  
还是小白还有好多不懂得东西

**HTML部分：**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>纯css轮播图</title>
        
        <link rel="stylesheet" href="css/style.css">
    </head>
    
    <body>
       
        <div class="main">
            <ul>
                <li>
                    <a href="#"> <img src="img/img-1.jpg" alt=""></a>
                </li>
                
                <li>
                    <a href="#"> <img src="img/img-2.jpg" alt=""></a>
                </li>
                
                <li>
                    <a href="#"> <img src="img/img-3.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"> <img src="img/img-4.jpg" alt=""></a>
                </li>
                <li>
                    <a href="#"> <img src="img/img-5.jpg" alt=""></a>
                </li>
            </ul>
    
    
        </div>
    </body>
    
    </html>

**CSS部分：**

* { 
        margin: 0;
        padding: 0;
    }
    
    
    /* 清除li样式 */
    
    li { 
        list-style: none;
    }
    
    
    /* 创建动画 */
    
    @keyframes dh { 
        0%, 20% { 
            margin-left: 0px;
        }
        25%, 40% { 
            margin-left: -1200px;
        }
        45%, 60% { 
            margin-left: -2400px;
        }
        65%, 80% { 
            margin-left: -3600px;
        }
        85%, 100% { 
            margin-left: -4800px;
        }
    }
    
    .main { 
        margin: 100px auto;
        width: 1200px;
        height: 375px;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 边框圆角 */
        border-radius: 20px;
    }
    
    ul { 
        width: 6000px;
        animation: dh 10s linear infinite;
    }
    
    ul li { 
        float: left;
    }

[1]: https://img-blog.csdnimg.cn/20200621232712433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1,size_16,color_FFFFFF,t_70
[2]: https://img-blog.csdnimg.cn/20200621232738598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDU5ODQ1,size_16,color_FFFFFF,t_70