利用CSS3 animation做的一个下雨场景DEMO

HTML/CSS 2014-01-06 CSS3,animation,下雨

下雨场景图片

DEMO(FireFox/Chrome) : http://www.qttc.net/static/demo/20140106/rain.html

简单说下制作思维

关于雨滴

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

关于雨水

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

最后

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

文字链接:《利用CSS3 animation做的一个下雨场景DEMO

文章地址:http://www.qttc.net/201401399.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 3

  • 新技术还是不够成熟。Firefox 效果好,占用资源比较大,Chrome 不卡,但是效果就 哈哈 了。
    2014-01-21 22:54:41 [ 跟帖 ]
    居然遇到这个大神了
    2016-07-22 23:02:20 [ 跟帖 ]
    不是大神,琼台兄才是
    2016-07-23 12:56:05 [ 跟帖 ]
    1 #