专栏首页杨逸轩 ' sBlog元旦快乐 – 使用snow.js增加下雪效果

元旦快乐 – 使用snow.js增加下雪效果

哈,大家元旦节快乐哈!

那先放例程吧 [源码来自:源码之家]

原地址:HTML5 canvas圣诞节雪花网页背景代码 – 源码之家

使用方法:

先用 <script> 标签加载js文件

<script type="text/javascript" src="js/snow.min.js"></script>

然后在html里任意位置添加

<canvas id="snowFallTop" class="snowFall snowFallTop" width="1220" height="162" style="left: 321px;"></canvas>
<!-- ↑顶部雪花 -->
<canvas id="snowFallLeft" class="snowFall snowFallLeft" width="321" height="742" style="width: 321px;"></canvas>
<!-- ↑左部雪花 -->
<canvas id="snowFallRight" class="snowFall snowFallRight" width="321" height="742" style="width: 321px;"></canvas>
<!-- ↑右部雪花 -->

我这里为了防止雪花遮住屏幕而使用了三个分别置于顶部,左部,右部

id跟class跟其他html标签一样使用即可,可以在css文件里添加 .snowFall 等标签以达到修改雪花样式的效果

例如:

@charset "utf-8";
.snowFall{position: fixed; top: 0; z-index: 999;pointer-events: none;_display: none; color: #ffffff;}
.snowFallTop{left: 0; width: 1220px; height: 50%; }
.snowFallLeft{left: 0; height: 742px; z-index: 3;}
.snowFallRight{right: 0; height: 742px; z-index: 3;}

另外,若想让雪花随着页面下滑而下滑的,可以在CSS中为 .snowFall 元素添加 fixed 的 postion 元素

例如:

.snowFall{position: fixed;}

其他问题

如果你们想加快访问速度的话可以吧CSS文件和snow.js放到一些云存储空间(七牛云之类的) 如果想直接调用可以直接使用<canvas>标签

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用canvas实现简单的下雪效果

    首先新建一个html文件,将body的背景设置为天空的那种深蓝色,并创建一个canvas,canvas的操作逻辑都放在snow.js中:

    MudOnTire
  • 赴美冲击IPO,奈雪的茶们只是看上去很美?

    近日,有报道称奈雪的茶最早将于今年在美国进行IPO,计划融资4亿美元。对此奈雪的茶负责人回应称,目前公司重心都在应对疫情和快速恢复运营上,暂不评论市场上的相关流...

    刘旷
  • 度假指南丨和家人、朋友一起探索VR,解谜、养宠物、拆炸弹......

    新年伊始,刚刚过去的元旦有跟家人好好度过吗?2020的第一个周末跟家人或好友一起在VR里度个假吧!若是孤身在外,单人也能拥有精彩丰富的VR度假体验哦~ 一起跟随...

    VRPinea
  • 剧情动效设计 | 天天P图迪士尼公主系列

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 近期“天天P图”合作迪士尼公主系列IP,推出“为自己加冕”的主题营销推广,从创...

    腾讯ISUX
  • Mybatis-Plus基础功能测试使用

    推荐阅读:分布式系统唯一id生成:https://www.cnblogs.com/haoxinyue/p/5208136.html

    乐心湖
  • 用 Wolfram 语言制作圣诞动画

    WolframChina
  • 奈雪的茶走到命运岔路口

    长期以来,茶饮赛道都是备受关注的风口之一,奶茶自由、奶茶续命等热词不断出现,也足以说明了消费者对茶饮产品的喜爱。根据《2020新式茶饮白皮书》显示,2020年中...

    刘旷
  • 美团点评:“滚雪球”的价值

    6月,港交所“新经济冲锋军”名单又增加了一家公司:美团点评在22日向港交所提交招股书,25日被披露出来。截至目前,除了确定将在7月9日敲钟的小米外,腾讯音乐、同...

    罗超频道
  • 康力优蓝刘雪楠:用自主产品树立长远品牌,基于ODM战略合作打造AI生态 | 镁客请讲

    镁客网
  • 数据分析实例:快消品冰激凌行业分析和经营策略制定(一)

    客户是一家MNC冰激凌企业,在过去3年中,其市场规模的增速低于其他外资品牌,因此想通过寻找新的增长机会,制定正确的经营策略,最终实现更高的增长速度。

    沉默的白面书生
  • 你知道刷一刷红包预热H5背后—设计在弄啥嘞?— 腾讯ISUX

    腾讯ISUX
  • 新茶饮:洗牌、转型、并购

    伴随着新茶饮赛道的日益火热,各种新茶饮品牌也如同雨后春笋蓬勃兴起,开始越来越多地占据消费者的眼球。目前行业内除了有喜茶、蜜雪冰城、奈雪的茶等大品牌之外,沪上阿姨...

    用户6132544
  • Z世代搅动千亿新式茶饮市场风云,疫情后行业或加速出清?

    90、00 后消费力崛起,新式茶饮打开中国茶饮市场天花板,2021 年新式茶饮市场规模预计达到1102 亿元。

    庄帅
  • 动效设计原理:从卡通动画到UI动效

    作者:袁骁,腾讯SNG ISUX 用户体验设计师。热衷于研究 Emotional Design和认知心理学 UI是基于静态页面来设计的,页面之间通过跳转切换。在...

    腾讯大讲堂
  • 动效设计原理:从卡通动画到UI动效 - 腾讯ISUX

    腾讯ISUX
  • Mybatis-Plus必会知识点(精美最全)

    @Data public class User { ...... @TableField(fill = FieldFill.INSER...

    CaesarChang张旭
  • 奈雪的茶迫不及待奔赴IPO

    如今,奶茶已成为年轻群体的常态消费产品之一,并且承载了他们一定的社交需求,逐渐渗透到了办公室社交、亲友聚会等消费场景。而随着消费场景的扩大,奶茶这个生意也越来越...

    金融外参
  • iOS实践:通过核心动画完成过山车1. 思路和所用到的内容2. 辅助元素的创建(背景颜色、草坪、大地、小树、云彩)3. 雪山的实现4. 轨道的实现

    stanbai
  • 小火的椿风茶饮,能靠“养身”出道吗?

    近日,喜茶、沪上阿姨、蜜雪冰城接连被报道获得融资,奈雪的茶也于港交所挂牌上市,中国新式茶饮品牌动作频频,竞争渐入白热化阶段。

    金融外参

扫码关注云+社区

领取腾讯云代金券