有趣的css—简单的下雨效果2.0版
简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css—简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处。 这是按照老哥的建议完善后的效果图:由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点点卡顿,实际的效果比图片还是要好一些的,点击这里可以在线查看2.0版的效果。 思路 制作背景 首先给body中添加一个id为rain的div,并通过背景颜色线性渐变得到天空-地平线-海面的效果。 <!DOCTYPE html> <html> <head> <meta name="charset" content="utf-8"/> <title>简单的下雨效果2.0</title> </head> <body> <div id="rain"></div> </body> </html> #rain { position: relative; height: 100%; backgr...










