请选择 进入手机版 | 继续访问电脑版

飘雪效果分享

发表于 2017-12-25 20:16 显示全部楼层 16 327

飘雪效果分享

        最近冬季,很多公司做一些专题活动页面或者h5宣传页面都喜欢加上飘雪的特效,这样子会营造比较有氛围的一种感觉,今天圣诞节,那么就分享两个比较优雅的飘雪效果吧~~~


        飘雪效果一:


     demo1.gif


这是一款基于canvas的飘雪特效,比较自然优雅,使用方法也很简单:


1  在body标签内部任意地方加上结构<div class="snow-container"></div>


2  在css里面加上对应样式,样式主要设置飘雪范围盒子宽高并且把层级设置在网页最上层,注意pointer-events:none;作用是把飘雪效果鼠标事件清除掉,只显示视觉效果, 加上之后飘雪效果盒子虽然在网页最上层,但是不会遮盖网页其他正常的点击内容,这是一个非常好用的属性哦。

 .snow-container{position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:100001;}


3  因为这是使用jq开发的飘雪效果,所以第三步引入jq文件


4  引入snowslow.js文件,自然的雪花漂落效果就搞定了



        飘雪效果二:


demo2.gif



这是一款基于原生js开发的一款飘雪效果,认真看雪花外观也比较多,而且会产生积雪,比较有意思吧,至于使用方法,就更加简单了,只需要引入snow.js效果就出来啦~~~



任意回复本帖子,可以下载源码

链接: https://pan.baidu.com/s/1sl3bwKl 

游客,如果您要查看本帖隐藏内容请回复



回复 使用道具
举报
纯银

发表于 02-21 19:20 显示全部楼层

回复 支持 反对 使用道具
举报
L茗郦

发表于 01-20 11:47 显示全部楼层

我来这签个到啦哈哈哈哈哈哈哈哈哈哈哈哈哈
回复 支持 反对 使用道具
举报
paschen

发表于 01-20 11:47 显示全部楼层

活跃活跃论坛气氛~求楼主加好友

回复 支持 反对 使用道具
举报
pcatzj

发表于 01-15 17:10 显示全部楼层

回复 支持 反对 使用道具
举报
为你守候

发表于 01-11 21:35 显示全部楼层

回复 支持 反对 使用道具
举报
顾唐

发表于 01-08 20:32 显示全部楼层

祝愿小码哥越来越红火!!红红火火恍恍惚惚!

回复 支持 反对 使用道具
举报
窗枝猫

发表于 01-07 18:30 显示全部楼层

回复 支持 反对 使用道具
举报
炒菜不加盐

发表于 01-07 18:11 显示全部楼层

回复 支持 反对 使用道具
举报
oygza

发表于 01-07 18:10 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
欧水萍

小码哥名师团队

0

学分

1805

学币

1976

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1976
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育