Question

我有代码：

<div class="logo">
<a href="/">
<img src="/images/logo3.png" style="width:180px; margin-top:4px;">
</a>
</div>

和css：

#topnav #navcontainer .logo:hover {
  transform: rotateY(-360deg);
  -webkit-transform: rotateY(-360deg);
  -o-transform: rotateY(-360deg));
  -moz-transform: rotateY(-360deg);
  transition: 2.7s;
}

我需要再添加一个图片，如：

<div class="logo">
<a href="/">
<img src="/images/logo3.png" style="width:180px; margin-top:4px;">
<img src="/images/logo4.png" style="width:180px; margin-top:4px;">
</a>
</div>

所以第二张图片将隐藏在网站上，但在悬停时我需要旋转第一张图片，然后逐个旋转第二张图片。第一个图像完成旋转，然后开始旋转第二个图像。我怎么才能实现这个动画？也许我需要使用jQuery，如果有人有想法我会很高兴。例如，您可以在网站上看到如何使用一个图像进行旋转。 example如果您将徽标悬停在左上方。现在它正在处理一个图像。我需要添加第二个图像并逐个旋转。

Answer 1

在纯css中，您可以使用animation获取第一个图像的旋转，使用transition显示第一个旋转完成后的第二个图像，并使用相同的旋转效果 - 秒延迟：

e.g。 http://codepen.io/anon/pen/pvGNvO?editors=110

相关CSS

@-webkit-keyframes rotate {
    0% { transform: rotateY(0)  }
    100% { transform: rotateY(-360deg) }
}
@-moz-keyframes rotate {
    0% { transform: rotateY(0)  }
    100% { transform: rotateY(-360deg) }
}
@keyframes rotate {
    0% { transform: rotateY(0)  }
    100% { transform: rotateY(-360deg) }
}


img + img { 
   opacity: 0;

   /* on :hover the opacity turn to 1 (in 0s) with a delay of 2 seconds */
   -webkit-transition: opacity 0s 2s;
   -moz-transition: opacity 0s 2s;
   transition: opacity 0s 2s;
}

a:hover img {

    /* the animation is applied to both the images but... */
    -webkit-animation: rotate 2s linear 0s;
    -moz-animation: rotate 2s linear 0s;
    animation: rotate 2s linear 0s;
}

a:hover img + img {
    opacity: 1;

    /* ... for this image the rotation effect starts 2 seconds later */
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    animation-delay: 2s;
}

将图像旋转360度

1 个答案: