Javascript 交叉淡入PNG精灵_Javascript_Jquery_Css

Javascript 交叉淡入PNG精灵

javascript jquery css

Javascript 交叉淡入PNG精灵,javascript,jquery,css,Javascript,Jquery,Css,我有一个PNG：我正试图通过CSS用png制作一个动画，我想让图像交叉淡入淡出，这样只会产生花瓣淡入淡出的错觉。现在，图像确实正确地改变了，但我不知道如何使新的花瓣淡入。在这一点上，我将接受Javascript/jquery的任何方法，尽管css才是完美的这是我的代码： <!DOCTYPE html> <html> <head> <title>CSS Sprite Animation</title> </h

我有一个PNG：

我正试图通过CSS用png制作一个动画，我想让图像交叉淡入淡出，这样只会产生花瓣淡入淡出的错觉。现在，图像确实正确地改变了，但我不知道如何使新的花瓣淡入。在这一点上，我将接受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>


CSS精灵动画
#喷雾容器{
宽度：700px；
高度：507px；
显示：块；
背景图片：url（“karuna_animation.png”）；
动画：精灵3步（12）无限；
}
@关键帧精灵{
100% {
背景位置：-8520px；
}
}

也许做淡入淡出的一种方法是将你的精灵与花瓣一起剪下尽可能多的图片，然后使用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，但我不知道方法）显示它们

也许你可以使用几个不同不透明的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:

除非实际图像包含“淡入淡出”，否则我不确定如何才能实现您想要的效果。你不能给背景图像（或背景图像的一部分）增加不透明度。我还可以将所有图像分开。我想你需要带有部分透明的叶子的临时图像，这样看起来它们会淡入淡出。然后你需要调整背景位置和动画。老实说，我会让我的屏幕设计师将其导出为动画gif。

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