如何让雨水堆积在网页上的文字和倾倒

Question

我怎样才能让雨在“我的文本”上流过？我有这个代码，你可以在我的JSFiddle中看到：

function strop(cleft, ctop, d) {
    var drop = document.createElement('div');
    drop.className = 'punct';
    drop.style.left = cleft + 'px';
    drop.style.top = ctop + 'px';
    drop.id = d;
    document.getElementById('content').appendChild(drop);
}

http://jsfiddle.net/35h2Q/23/

单击底部的start按钮后，雨就开始了。

我正在尝试制作雨效果，突然想到的是“为什么不让雨流堆积成倾倒的文字呢？”但是我已经尝试了所有的方法让雨堆在文本上流动，但我没有成功。

我做了一些研究，可能有一些物理定律使之成为可能。你知道我该怎么做吗？你有任何进一步的建议来改进动画吗?谢谢。

Answer 1

在rain drop css规则上设置z-index: 1

修改的小提琴：http://jsfiddle.net/35h2Q/22/