0

对于我的图像，我遇到了一些故障。首先，我让这一切正常工作，然后我把一个班级变成了五个不同的班级，所以我可以单独更改它们的大小，而不会影响到它们。唯一的问题是，现在我这样做了，图片没有旋转，只有文字除了第一个。此外，当我将图像调整为更大时，我将这样做，它不会一直旋转。起初我认为这是动画的问题，但我不太确定，因为它被设置为 180 度旋转，无论大小都应该发生这种情况。我的网站在这里http://spencedesign.netau.net/singapore-gallery.html我想要布局我的图片的方式是在此处输入图像描述

4

1 回答 1

1

图标动画中的错误是因为您仅指定了.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>

此外，当我将图像调整为更大时，我将这样做，它不会一直旋转。起初我认为这是动画的问题，但我不太确定，因为它被设置为 180 度旋转，无论大小都应该发生这种情况。

不幸的是，我看不到任何类似于您问题的第二部分的内容，是否附加了画廊插件或其他东西？我已经使用 Chrome Canary 和 FireFox 测试了您的网页

于 2012-11-20T02:51:32.023 回答