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

检查这个小提琴