CSS实现简单的Slider

最新推荐文章于 2024-05-28 09:53:05 发布

weixin_34126557

最新推荐文章于 2024-05-28 09:53:05 发布

阅读量203

点赞数

原文链接：http://www.cnblogs.com/gogolee/p/6652290.html

版权

直接代码贴出来吧。

<!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相等是为了实现“停顿”效果，看上去自然一些。

转载于:https://www.cnblogs.com/gogolee/p/6652290.html

weixin_34126557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现简单的Slider

直接代码贴出来吧。<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .myDiv { width: 500px; height: 200...
复制链接

扫一扫