CSS实现简单的Slider

直接代码贴出来吧。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .myDiv {
            width: 500px;
            height: 200px;
            margin: 20px auto;       
            overflow: hidden;
        }
        .container {
            width: 500%;
            animation: loop 10s linear infinite;
        }
        .container div {
            width: 20%;
        }
        img {
            width: 100%;
            height: 200px;
        }
        @keyframes loop{
           0% { margin-left: 0%; }
            20% { margin-left: 0%; }
            25% { margin-left: -100%; }
            45% { margin-left: -100%; }
            50% { margin-left: -200%; }
            70% { margin-left: -200%; }
            75% { margin-left: -300%; }
            95% { margin-left: -300%; }
            100% { margin-left: -400%; }
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <div class="container">
            <div class="fl">
                <img src="image/1.jpg">
            </div>
            <div class="fl">
                <img src="image/2.jpg">
            </div>
            <div class="fl">
                <img src="image/3.jpg">
            </div>
            <div class="fl">
                <img src="image/4.jpg">
            </div>
            <div class="fl">
                <img src="image/1.jpg">
            </div>
        </div>
    </div>
</body>
</html>

animation中之所以设置两个两个之间margin-left相等是为了实现“停顿”效果，看上去自然一些。

posted @ 2017-03-31 17:03  一片叶子啊  阅读(897)  评论(0)  编辑  收藏  举报