1

私には2つの背景があります：

body {
    background-image: url(img/nemo.png),url(img/ocean.png);
}

nemo.png background左右から無限に移動するが影響を与えないようにするにはどうすればよいocean.png backgroundですか？

編集：彼が右端に到達すると（そして画像が表示されなくなると）、彼は再び左端から現れ、左から右へのドリフトを開始します。

4

3 に答える 3

10

これは、純粋なCSS 3、たとえばキーフレームアニメーションで実行できます。

デモ： http： //jsfiddle.net/dghsV/112

body {
    background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%, 0;
    -moz-animation: swim 2s linear 0s infinite;
    -webkit-animation: swim 2s linear 0s infinite;
    animation: swim 2s linear 0s infinite;
}
@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}

構文

animation：;animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

この機能は実験的なものであるため、ベンダープレフィックス（例-webkit-）を追加する必要があります（互換性に関する注意事項については、 CSS3アニメーションを使用できますか？も参照してください）。私のデモでは、最後のプロパティを除いて、すべてのプロパティを使用しました。

于 2012-04-11T14:44:58.550 に答える
0

オプションは次のとおりです。

nemo.png左から右に移動する画像の単純なアニメーションである アニメーションGIFを作成します。

ocean.png次に、ページの背景に設定して、レイヤー化された背景を作成しbodyます。

次にdiv、次のcssを使用してwhichを作成します。

width:100%; 
height:100%;
background-position:center center;
background-image: url(img/moving-nemo.gif);

はdiv、すべてのコンテンツを網羅するコンテナになり、レイヤー化された背景効果を提供します。

于 2012-04-11T14:14:54.923 に答える
0

海だけを背景にし、nemoを背景としてdivを作成します。

<div id="nemo"></div>

#nemo {
    background: url(nemo.png) no-repeat;
    width: 100px;
    height: 100px;
    position:absolute;
    left: 0px;
    top: 500px;
    z-index:-10;
}

このdivをjavascript（jQuery）でアニメーション化できるよりも：

<script type="text/javascript">
    $(document).ready(function() {
        SwimRight();
    });

//duration is in ms
function SwimRight() {
     $('#nemo').css({positionLeft: 0});
     $('#nemo').animate(
          { left: $(document).width() },
          { duration: 5000,
          easing: normal,
          queue: true, 
          complete: SwimRight}
     );
</script>
于 2012-04-11T15:40:17.283 に答える