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

检查这个小提琴