css3-无缝滚动

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

动画的名称和运行所需时间是必须的

帧动画：将动画名称赋给选择器后动画运行完就会返回初始值，所以需要通过给选择器添加类保证动画的正常运行

下图是一个简洁的无缝滚动（css3）

划过停止运动：animation-play-state:paused

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../css/public.css"/>
        <style type="text/css">
            .wrap{width: 500px;height:100px;overflow:hidden;margin: 100px auto;position: relative;border: 10px solid #999;}
            .list{position: absolute;left:0;top:0;width: 1000px;height: 300px;}
            .list:hover{-webkit-animation-play-state: paused;-moz-animation-play-state: paused;-ms-animation-play-state: paused;animation-play-state: paused;}
            .list li{float:left;width: 98px;height: 98px;border: 1px solid #000;text-align: center;line-height: 98px;}
            @-webkit-keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            @-moz-keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            @-ms-keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            @keyframes move{
                0%{
                    left: 0;
                }
                100%{
                    left: -500px;
                }
            }
            .scroll{-webkit-animation: 3s move infinite;-moz-animation: 3s move infinite;-ms-animation: 3s move infinite;animation: 3s move infinite;left: -500px;}
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oUl=document.getElementById("list");
                oUl.className='list scroll';
            }
        </script>
    </head>
    <body>
        <div class="wrap">
            <ul class="list" id="list">
                <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 @ 2016-12-08 15:49  rain92  阅读(1404)  评论(0)  编辑  收藏  举报