zoukankan html css js c++ java

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

查看全文

相关阅读:
PHP 单态设计模式
 五中常见的PHP设计模式
 PHP如何定义类及其成员属性与操作
 thinkphp 中MVC思想
 1.4 算法
 1.3 迭代器
 1.2 容器-container
1.1 STL 概述
 2.3顺序容器-deque
2.2 顺序容器-list

原文地址：https://www.cnblogs.com/gogolee/p/6652290.html