Hot For Coding
CSS3下雨场景

full

点这里看效果

简单说下制作思维

雨滴

雨滴其实就是一个宽150px高1px的div,然后使用css3的rotate让它倾斜一下就好,然后使用css3的线性渐变,就成雨滴了。由上往下掉使用animation控制它的left与top即可。为了让它有远近的效果可以随机给一部分半透明,top参差不平。

雨水

首先是画椭圆,很简单只要给一个长方形然后border-radius: 50%就好,然后animation控制它的width与height就好,最后消失的时候给下opacity由1到0就有效果了,同样为了有层次感,可以随机给一部分半透明。

最后

这个动画例子证明了CSS3的方便之处,测试时雨滴如果到一定数量浏览器会出现呆滞、CPU占用高。也可能跟电脑配置有关,但正常情况下都够你用的,也只有这种示例才会满屏使用动画。

TITLE: CSS3下雨场景

LINK: https://www.qttc.net/399_css3_rainy.html

NOTE: 转载内容请注明出处