0

私はこれを持っています: http://d.pr/i/A2b3これは、ヘッダーとメインコンテンツの間の仕切りとして機能します。

この画像は、ヘッダー コンテナーの背景画像、repeat-x として設定されます。

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

波のような効果で、画像が画面上をゆっくりとスライドするようにします。これは CCS3 アニメーションで可能ですか? もしそうなら、誰かが助けることができますか？

ありがとう

4

2 に答える 2

0

これを試して！

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 */
}

ここで遊ぶための Fiddle を作成しました: http://jsfiddle.net/e3WLD/3/

于 2013-02-20T18:50:46.743 に答える
0

jQuery と単純な画像スライダーを使用して、画像の一時停止を短くして、画像が切り替わるようにすることをお勧めします。私の知る限り、ビデオをスライダーに表示することはできません（何らかの再生ボタンがないわけではありません）。http://www.catchmyfame.com/2009/06/04/jquery-infinite-carousel-plugin/は、私が使用するものの例です。

于 2013-02-20T15:05:38.317 に答える