专栏首页杨逸轩 ' 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 条评论
登录 后参与评论

相关文章

  • 利用 CSS3 动画绘画动态时钟

    杨逸轩
  • 响应式Web设计技巧以及入门技巧

    杨逸轩
  • CSS3版天气预报

    杨逸轩
  • 走进Sass殿堂

    最近在学习sass,从sass新手的角度做一个简单的总结,总结的不对的地方期望各位大大们能多多指点,本文是针对sass3.4做的一个总结~ 一、变量篇 1.1 ...

    IMWeb前端团队
  • 走进Sass殿堂

    最近在学习sass,从sass新手的角度做一个简单的总结,总结的不对的地方期望各位大大们能多多指点,本文是针对sass3.4做的一个总结~

    IMWeb前端团队
  • 引入TiDB方案的一些思考

    在MySQL技术体系建设上,能够实现资源水平扩展,满足现在和未来的基础存储需求是一个基本目标,从中长期来说,基于关系型的数据库分布式方案存在明显瓶颈。

    jeanron100
  • 如何实现黑幕?即鼠标触及之地,原来黑色显示原来文字

    最近在写文章时,有些比较敏感的句段想实现默认情况下黑色(遮住文字),而鼠标靠近之后显示出来这些敏感句段的功能。

    lollipop72
  • 必应首页平铺背景图片的实现方案

    近期某个项目中需要实现以下需求: 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致,则以图片中心为基点等比缩放背景图片,以适应屏幕尺寸。 以上需求...

    寒月十八
  • 重要:Kafka第3篇之一条消息如何被存储到Broker上

    经过上篇文章的简单实战之后,今天来聊聊生产者将消息从客户端发送到 Broker 上背后发生了哪些故事,看不看由你,但是我保证可以本篇文章你一定可以学到应用背后的...

    z小赵
  • Jmeter之json提取器实战(二)

    之前写过一篇文章【Jmeter篇】后置处理器之正则提取器、Json提取器 不是很完善,今天我们再来写一篇json提取器进行补充说明。

    橙子探索测试

扫码关注云+社区

领取腾讯云代金券