Question

我目前正在为一个网站制作一个“动画”背景，其中背景图像在一小时后滚动，然后重置到其原始位置以重新开始。我目前通过一些photoshop技巧使图像看起来像是一个360度的图像。虽然在测试滚动图像时，我注意到图像“跳跃”到过渡的每个部分的位置。我正在寻找比像素从像素到像素“跳跃”更平滑但仍然保持非常慢的东西。如果通过javascript有更好的选择，我绝对是全部的耳朵。

以下是我目前用于CSS的内容（一旦我实际使用的图片完成，div背景图像大小会改变）：

*{
    margin:0; 
    padding:0; 
    border: 0; 
    line-height: 100%; 
    font-size: 100%;
}

#container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}
#center {
    background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png);
    background-size: contain;
    width: 100%;
    height: 100%;
    position:absolute;
    animation: scroll 3600s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
}
@keyframes scroll {
0% {right:0%;}
100%{right:100%;}
}

Answer 1

你可以使用jQuery。这提供了一个很好的平滑动画，也可以跨浏览器兼容。

<!DOCTYPE html>
<html>
<head>
    <title>Animate</title>
</head>
<body>
    <div id="container">
        <div id="center"></div>
    </div>
    <!--The following gets the jQuery code from the jQuery CDN and loads it to your page-->
    <!--This needs to be called before any jQuery code will run-->
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        /*
        The following uses jQuerys animate method
        The part before the first period decides which element we want to target,
        in your case the div with ID center. Next call animate and tell it what to 
        animate. We want to change the right position to 100% from whatever it is
        initially. The number following that is the amount of time it will take your
        animation to complete in milliseconds.
        */
        $("#center").animate({right: "100%"}, 50000);
    </script>
</body>
</html>

编辑：在如此缓慢的移动速度下，它看起来也不稳定，但不是生涩。如果你减慢速度，它会看起来好多了。

我可以使用更好（更顺畅）的过渡吗？

1 个答案: