css - CSS 3 动画 - 在屏幕上滑动

Question

我有这个：http ://d.pr/i/A2b3 ，它充当标题和主要内容之间的分隔符。

该图像被设置为标题容器的背景图像，repeat-x。

<header> <--- image is background of this
    <div id="container"></div>
</header>

我希望图像以类似波浪的效果在屏幕上缓慢滑动。CCS3 动画可以做到这一点吗？如果是这样，有人可以帮忙吗？

谢谢

Answer 1

我建议使用 jQuery 和一个带有缩短图像暂停的简单图像滑块，以便图像不断切换。据我所知，不可能让视频出现在滑块中（不是没有某种播放按钮）。http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/将是我将使用的一个示例。

Answer 2

尝试这个！

CSS：

header {
    width: 100%;
    height: 150px;
    background-image: url(http://www.scottishheritageusa.org/imgs/header_separator.png); //replace with your image
    background-position: 0px;
    background-repeat: repeat-x;
    -webkit-animation: myanim 5s infinite linear;
       -moz-animation: myanim 5s infinite linear;
         -o-animation: myanim 5s infinite linear;
            animation: myanim 5s infinite linear;
}

@-webkit-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-moz-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@-o-keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}
@keyframes myanim {
    0%   { background-position: 0px; }
    100% { background-position: 100px; } /* set this to the width of the image */
}

我在这里创建了一个小提琴供您使用：http: //jsfiddle.net/e3WLD/3/