0

我有一个总共存在 3 张图像的背景。然而，中间的背景图像（wrapper2）在视觉上是“介于”两个背景图像（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; }
...

重要的是您必须定义step-start！

animation-timing-function: step-start;

此 step-start 在 Internet Explorer 10 中运行良好。 备注：对于较旧的浏览器，动画将不起作用（CSS3 未知或 step-start 未知）并且您的第一个 sprite 将显示，因此请确保您的第一个 sprite 是你的初始状态。

供您参考：我使用 GIMP 创建动画并使用名为 CSS WebSprites 的插件自动生成我的精灵和 CSS 代码： GIMP CSS WebSprites 插件

于 2013-03-12T21:55:04.393 回答