动画 - 从水龙头流出的水 - 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