前端轮播图CSS3无缝滚动

前端开发招聘猎聘|web前端开发技术期末考试|前端手机端开发曲屏

html 代码

<!DOCTYPE html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
    <title>无标题文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 500px;
            height: 100px;
            border: 1px solid #000;
            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }
        #wrap ul {
            position: absolute;
            left: 0;
            top: 0;
            -webkit-animation: 3s move infinite linear;
            width: 200%;
        }
        #wrap ul li {
            list-style: none;
            width: 98px;
            height: 98px;
            border: 1px solid #fff;
            background: #000;
            color: #fff;
            font: 50px/98px Arial;
            text-align: center;
            float: left;
        }
        #wrap:hover ul {
            -webkit-animation-play-state: paused;
        }
        @-webkit-keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: -500px;
            }
        }
    </style>
</head>
<body>
    <div id=”wrap”>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>

web前端开发技能点|前端开发掌握的技能|前端手机开发手指按下抬起事件

» 本文来自:前端开发者 » 《前端轮播图CSS3无缝滚动》
» 本文链接地址:https://www.rokub.com/5126.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!