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/

CSS 3动画 - 跨屏幕滑动

2 个答案: