元旦快乐 – 使用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 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

Layui常用方法

layui中的input radio单选框监听选择触发事件: 根据给input绑定的 lay-filter 进行查找input,然后进入函数判断 ...

7789
来自专栏狂码一生

利用ajaxFileUpload.js实现多文件异步上传功能

  AjaxFileUpload.js是网络开发者写好的插件放出来供大家使用用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。在这里我将网络...

47613
来自专栏CodingBlock

Java数据结构和算法总结-数组、二分查找

前言:在平时开发中数组几乎是最基本也是最常用的数据类型,相比链表、二叉树等又简单很多,所以在学习数据和算法时用数组来作为一个起点再合适不过了。本篇博文的所有代...

2139
来自专栏Scott_Mr 个人专栏

两个imageView实现图片轮播

2555
来自专栏更流畅、简洁的软件开发方式

【自然框架】QuickPager分页控件,新增一种分页方式——伪URL分页(Postback版)

适用场景   先说一下伪URL分页的适用场景。在网站的网页里实现查询功能,如果查询条件比较少的话,还比较好办,把查询条件放到URL里面传递即可。但是如果查...

2306
来自专栏Java3y

Servlet第五篇【介绍会话技术、Cookie的API、详解、应用】

什么是会话技术 基本概念: 指用户开一个浏览器,访问一个网站,只要不关闭该浏览器,不管该用户点击多少个超链接,访问多少资源,直到用户关闭浏览器,整个这个过程我们...

2985
来自专栏一“技”之长

AppleWatch开发入门九——Watch帧动画的实现

        动画一直是iOS系统的一大亮点,CoreAnimation和粒子效果的支持,开发者可以很容易的做出效果炫酷的动画特效。在watchOS中,由于性...

712
来自专栏阮一峰的网络日志

React 测试入门教程

越来越多的人,使用React开发Web应用。它的测试就成了一个大问题。 React的组件结构和JSX语法,不适用传统的测试工具,必须有新的测试方法和工具。 本文...

3314
来自专栏后台架构

Sphinx源码学习笔记(一):索引创建

  因为项目开发需要在游戏内部实现玩家名称的模糊查找功能,本身直接使用Sphinx配置mysql可以直接搭建一套模糊匹配的即可支持功能的实现。

2977
来自专栏IT派

前端本地文件操作与上传

前端无法像原生APP一样直接操作本地文件,否则的话打开个网页就能把用户电脑上的文件偷光了,所以需要通过用户触发,用户可通过以下三种方式操作触发:

692

扫码关注云+社区