Html 动画故障

对于我的图像，我有一些故障。首先，我让所有人都在工作，然后我把一个班变成了五个不同的班，这样我就可以单独改变他们的大小，而不会影响他们所有人。唯一的问题是，现在我这样做了，图片没有旋转，只有文本，除了第一个。另外，当我调整图像的大小，使其变得更大时，它不会一直旋转。起初我认为这是动画的问题，但我不太确定，因为它被设置为180度旋转，无论大小都应该如此。我的网站就在这里，我想要的图片布局方式是

图标动画中的错误是因为您只为

元素指定了。icon1

元素，您还必须对所有其他图标重复：

li:hover .icon1, li:hover .icon2, li:hover .icon3, li:hover .icon4, li:hover .icon5, li:hover .label {

  -webkit-transform:translateZ(-32px) rotateY(180deg);

  -webkit-animation-duration:0.33s;
  -webkit-animation-name:rotateOut;
  -webkit-animation-timing-function:linear;
  -webkit-animation-fill-mode:forwards;

}

这是一个相当笨拙的CSS构造，但很难坚持，我想你应该给每个元素一个基于通用类的CSS动画规则，给每个元素一个类，然后根据你的需要单独选择它，比如：

/* CSS */
.icon-bar li:hover .icon, .icon-bar li:hover .icon-label { 

   your animation code here
}

<!-- HTML -->

<ul class="icon-bar">
<li>
  <span class="icon first-icon"></span>
  <span class="label">item 1</span>
</li>
<li>
  <span class="icon second-icon"></span>
  <span class="label">item 2</span>
</li>
<li>
  <span class="icon third-icon"></span>
  <span class="label">item 3</span>
</li>
<li>
  <span class="icon fourth-icon"></span>
  <span class="label">item 4</span>
</li>
<li>
  <span class="icon fifth-icon"></span>
  <span class="label">item 5</span>
</li>
</ul>

/*CSS*/
.icon bar li:hover.icon、.icon bar li:hover.icon标签{
你的动画代码在这里
}


项目1


项目2


项目3


项目4


项目5

---

另外，当我调整图像的大小，使其变得更大时，它不会一直旋转。起初我认为这是动画的问题，但我不太确定，因为它被设置为180度旋转，无论大小都应该如此

---

不幸的是，我看不到任何东西像你问题的第二部分，是否有附加的图库插件或其他东西？我已经用Chrome Canary和FireFox对你的网页进行了测试

我会给你检查的，但是如果你现在看一下，所有的单词现在都在那里了。我也不知道你说的第二部分是什么意思。对不起，我是一个初学者，我刚经历过，我意识到。图标背景CSS上写着：nthchild..（2n+2）@user1815176我看到你的页面更新了，我想你解决了你的问题了吧？至于

：nth child

问题，删除

2n

您将得到

：nth child（2）

，这意味着CSS规则将针对您附加规则的元素的第二个子元素，例如：

li:nth child（2）{your CSS rules}

将只针对每个

li

的第二个子元素。查看此处以了解更多信息