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

检查这个小提琴