HTML + CSS 实现轮播图效果-蒲公英云

HTML + CSS 实现轮播图效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ 
                padding: 0px;
                margin: 0px;
            }
            .nav{ 
                width: 450px;
                height: 100px;
                overflow: hidden;
                border: 1px solid red;
            }
            .nav ul{ 
                width: 800px;
                height: 80px;
                animation-name: nav_lun;
                animation-duration: 2s;/* 一次滚动的时间 */
                animation-timing-function:linear;/* 匀速 */
                animation-iteration-count:infinite;/* 设置循环播放 */
                animation-delay: 1s; /* 鼠标移到ul上一秒后才开始滑动*/
            }
            .nav ul li{ 
                width: 100px;
                height: 100px;
                display: inline-block;
                float: left;
            }
            .nav ul li img{ 
                widows: 100px;
                height: 100px;
            }
            /* 鼠标移到div中时暂停 */
            .nav ul:hover{ 
                animation-play-state:paused;
            }
            /* 平移像素位置 */
            @keyframes nav_lun{ 
                from{ 
                    transform: translate(0px,0px); 
                }
                to{ 
                    transform: translate(-400px,0px); 
                }
            }
        </style>
    </head>
    <body>
        <center>
        <div class="nav">
        <ul>
            <li>
                <img src="cupon4.png" />
            </li>
            <li>
                <img src="cupon5.png" />
            </li>
            <li>
                <img src="cupon6.png" />
            </li>
            <li>
                <img src="cupon7.png" />
            </li>
            <li>
                <img src="cupon4.png" />
            </li>
            <li>
                <img src="cupon5.png" />
            </li>
            <li>
                <img src="cupon6.png" />
            </li>
            <li>
                <img src="cupon7.png" />
            </li>
        </ul>
        </div>
        </center>
    </body>
</html>