0

合計3枚の画像が存在する背景があります。ただし、中央の背景画像(wrapper2)は視覚的に 2 つの背景画像(wrapper1 と wrapper2)の「間」にあります。その真ん中の画像(wrapper2)を回転させようとすると、一番上の画像(wrapper3)も動きます。

中央の背景画像(wrapper2)のみが回転し、他の画像 (wrapper3) は回転できないようにするにはどうすればよいですか?

<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3">
<!-- blabla -->
</div>
</div>
</div>

#wrapper1 {
        background-image: url("../media/bg1.png");
        background-size: 300px 200px;
        background-repeat: no-repeat;
}

#wrapper2 {
        background-image: url("../media/bg2.png");
        background-size: 300px 200px;
        background-repeat: no-repeat;
}

#wrapper3 {

        background-image: url("../media/bg3.png");
        background-size: 300px 200px;
        background-repeat: no-repeat;
}


#wrapper2:hover 
{
    animation: TestAnim;        
      animation-iteration-count:  infinite;     
    animation-duration: 10s; 
}

@keyframes TestAnim
{
 0% { transform:rotate(0deg); }
 25% { transform:rotate(-4deg); }
 100% { transform:rotate(0deg); }
 }
}
4

1 に答える 1

0

わかりました、私が働いた方法は不可能でした。div（絶対/相対）を配置して、子ではなく兄弟にすることができます。

しかし、私はcss3アニメーションを使用して、必要なすべての回転のスプライト画像を作成することを選択しました。

CSSキーフレームアニメーションでは、毎回背景位置を移動します。

0% { background-position: 0 0; width: 300px; height: 200px; }
1% { background-position: 0 -200px; width: 300px; height: 200px; }
...

重要なのは、ステップスタートを定義する必要があるということです。

animation-timing-function: step-start;

このステップスタートはInternetExplorer10で正常に機能します。 備考：古いブラウザーの場合、アニメーションは機能せず（CSS3が不明、またはステップスタートが不明）、最初のスプライトが表示されるため、最初のスプライトがあなたの初期状態。

参考までに：GIMPを使用してアニメーションを作成し、CSS WebSpritesというプラグインを使用してスプライトとCSSコードを自動的に生成しました： GIMPCSSWebSpritesプラグイン

于 2013-03-12T21:55:04.393 に答える