css 纯css轮播图 示例

冰蝶 2020-02-16

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>纯css动画实现轮播图展示</title>
        <link rel="stylesheet" charset="utf-8" href="style.css" />
        <style>
        @keyframes move{
            0%{
                transform:translateX(0%);
            }
            20%{
                transform:translateX(0%);
            }
            25%{
                transform:translateX(-500px);
            }
            45%{
                transform:translateX(-500px);
            }
            50%{
                transform:translateX(-1000px);
            }
            70%{
                transform:translateX(-1000px);
            }
            75%{
                transform:translateX(-1500px);
            }
            95%{
                transform:translateX(-1500px);
            }
            100%{
                transform:translateX(-2000px);
            }
 
        }
        .wrap{
            width:500px; height:320px;
            position:relative; margin:50px auto;
            border:5px solid #f00;
            overflow:hidden;
        }
        ul,li{margin:0; padding:0; list-style:none;}
        img{vertical-align: top; border:none;}
        .list{width:500%;  animation: move 7s linear infinite}
        .list li{float:left; width:500px; height:320px;}
        .list img{width:100%; height:100%;}
    </style>

    </head>
    <body>
        <!-- <div id="boxId" class="boxClass">
            <canvas id = "canvasId" width = 500 height = 500></canvas>
        </div>
        <script type = "text/javascript" src = "main.js" ></script> -->
        
    <div class="wrap">
        <ul class="list">
            <li><img src="0-1.png" alt=""/></li>
            <li><img src="0-3.png" alt=""/></li>
            <li><img src="0-4.png" alt=""/></li>
            <li><img src="0-6.png" alt=""/></li>
            <li><img src="0-7.png" alt=""/></li>
        </ul>
    </div>
    </body>
</html>

相关推荐