动画 - 从水龙头流出的水 - CSS3或jQuery或GIF

Question

我想开发此动画，如下图所示，其中此泵是静态图像，我希望水流出此图所示的水滴并按照所示方向，点击其他元素。 这是否可以通过css3或jQuery来实现还是我需要一个gif。将不胜感激关于如何做到这一点的任何指针？

Answer 1

在我看来

jQuery是更好的选择。 创建2或3组水滴图像，并在setInterval（）中使用该图像来旋转这些图像以获得水滴效果。

var index = 0; 

setInterval(function(){ 
    switch(index){ 
     case 0: 
      $("#waterDrop").css("background-image","url('http://s24.postimg.org/fsfk2due9/image.png')"); 
      index = 1; 
      break; 
     case 1: 
      $("#waterDrop").css("background-image","url('http://s24.postimg.org/v5lcqdeld/image.png')"); 
      index = 0; 
      break; 
    } 
},200); 

入住这Fiddle