Question

我的背景总共有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); }
 }
}

Answer 1

好吧，我的工作方式不可能。我可以定位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;

此步骤启动在Internet Explorer 10中正常运行。 备注：对于较旧的浏览器，动画将无效（CSS3未知或步骤启动未知）并且您的第一个精灵将会显示，因此请确保第一个精灵是你的初始状态。

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

CSS3变换旋转嵌套的背景图像

1 个答案: