CSS实现简单无缝滚动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 500px;
        height: 100px;
        box-shadow: 0 0 120px #333;
        overflow: hidden;
        margin: 50px auto;
        cursor: pointer;
        position: relative;
    }
    .list{
        width: 200%;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }
    .list li{
        list-style-type: none;
        float: left;
        margin: 10px;
        width: 74px;
        height: 74px;
        line-height: 74px;
        color: #414141;
        text-align: center;
        font-size: 52px;
        text-shadow: 1px 1px 0px rgba(255,255,255,.55);
        border: 1px solid #333;
        padding: 2px;
        background-color: orange;
    }
    @-webkit-keyframes move{
        from{
            left: 0;    /*这里使用translate移动时，hover暂停时会有回弹，原因不详*/
            /*-webkit-transform:translate3d(0,0,0);*/
        }
        to{
            left: -500px;
            /*-webkit-transform:translate3d(-500px,0,0);*/
        }
    }
    .animate{
        -webkit-animation:move 5s linear infinite;
    }
    .wrap:hover .animate{
        -webkit-animation-play-state: paused;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <ul class="list animate">
            <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>

 

posted @ 2015-11-06 14:42  DuangDang  阅读(584)  评论(0)  编辑  收藏  举报