Question

我有这个PNG：

我正在尝试用这个png通过CSS制作动画，我希望图像交叉渐变，这样它就会产生只有花瓣渐渐消失的错觉。现在图像确实正确改变了，但我不知道如何让新花瓣淡入。此时我会接受Javascript / jquery的任何方法，虽然css只是完美的。

这是我的代码：

<!DOCTYPE html>
<html>

  <head>
    <title>CSS Sprite Animation</title>
  </head>
  <style type="text/css">
    #spriteContainer {
      width: 700px;
      height: 507px;
      display: block;
      background-image: url("karuna_animation.png");
      animation: sprite 3s steps(12) infinite;
    }

    @keyframes sprite {
     100% {
       background-position: -8520px;
     }
    }
  </style>

  <body>
    <div id="spriteContainer"></div>
  </body>

</html>

Answer 1

也许你可以使用几个具有不同不透明度的div？

.spriteContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 700px;
  height: 507px;
  display: block;
  background-image: url("http://i.imgur.com/DbVFiyW.png");
  animation: sprite 3s steps(12) infinite;
}

#spriteContainer1 {
  opacity: 0.3;
  animation-delay: 0.08s;
}

#spriteContainer2 {
  opacity: 0.6;
  animation-delay: 0.16s;
}

#spriteContainer3 {
  opacity: 1;
  animation-delay: 0.24s;
}

HTML：

<div id="spriteContainer1" class="spriteContainer"></div>
<div id="spriteContainer2" class="spriteContainer"></div>
<div id="spriteContainer3" class="spriteContainer"></div>

jsfiddle

Answer 2

也许一种做fadeIn的方法是用花瓣切割你的精灵，然后在jQuery中使用一个函数淡化它们？

所以你将有这样的结构：

<div id="spriteContainer">
  <img src="yourFirstPetal" alt="1st-petal" />
  <img src="yourSecondPetal" alt="2nd-petal" />
  <!-- and so on -->
</div>

在CSS中，您将图像置于绝对位置，一个位于前一个位置之上，然后使用fadeIn()和fadeOut()来显示jQuery（或CSS，但我不知道）方法）？

See an example of what I'm meaning here

交叉淡化PNG精灵

2 个答案: