Question

目前，我的背景图片使用此帖子中的代码向左移动。但问题是我的背景图像不是无限的，一旦它耗尽就会有一个丑陋的跳回到开头。有没有办法防止这种情况或者让它循环回来？这是我的html和css：

<div class="cantstyle">
<div id="0" class="slidebg bg" style="min-height:100em;background-image:url('footer_lodyas.png');">
<div class="hvr-underline-from-center" style="text-align:center; color:white;">
<h3 style="font-size:6em;color:white;text-align:center;margin-top:15%;"> title <span class="hvr-grow">t</span><span class="hvr-grow">t</span><span class="hvr-grow">l</span><span class="hvr-grow">E</span> </h3>
<p style="font-size:1.2em;"> subtitle </p>
<p><a href="#1">Home</a>  |  <a href="#2">Tab2</a>  |  <a href="#3">Tab3</a>  |  <a href="#4">Tab4</a></p>
</div>
</div>
</div>

的CSS：

 .bg:hover {
        background-image: url("footer_lodyas.png");
       -webkit-animation: 3s slideBg infinite linear;
        -moz-animation: 3s slideBg infinite linear;
    }
    @-webkit-keyframes slideBg {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 200px 0;
        }
    }
    @-moz-keyframes slideBg {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 200px 0;
        }

    }

Answer 1

我认为您应该制作另一部分代码，专门用于移动背景图像。您可能只需要重复当前的代码，但不要将其向前移动，而应将其移回。

试试这个：

＆＃13;

@-moz-keyframes slideBg {
    0% {
        background-position: 200px 0px;
    }

    100% {
        background-position: 0px 0px;
    }
}

@-moz-keyframes slideBg {
    0% {
        background-position: 200px 0px;
    }

    100% {
        background-position: 0px 0px;
    }
}

＆＃13;

如何让我的背景图像移动一段时间然后开始向后移动，然后重新开始？

1 个答案: