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

相关文章

来自专栏柠檬先生

VUE 入门基础(8)

十,组件  使用组件   注册     可以通过以下这种方式创建一个Vue实例       new Vue({          el: ...

2179
来自专栏游戏杂谈

DOM的事件模拟

只有根据DOM2级事件实现这些事件的浏览器才返回true,以非标准方式支持这些事件的浏览器会返回false;

1161
来自专栏xx_Cc的学习总结专栏

iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField的代理方法通知UITextField 在storyboard 中设置属性

4646
来自专栏LeoXu的博客

Flex笔记_处理用户输入 原

        Label、RichText、RichEditableText、TextInput、TextArea、RichTextEditor(MX)

682
来自专栏互联网开发者交流社区

最新jquery+easyui_api培训文档

1114
来自专栏布尔

select元素的options.add 与 insertbefore的区别

之前提到如果想改变元素的视觉效果(checkbox.checked=true会打钩),请在把元素添加到页面上再为其赋值,否则赋值无效。下拉框元素也有这样的问题,...

2057
来自专栏从零开始学自动化测试

selenium+python自动化93-鼠标事件(ActionChains)源码详解

ActionChains简介 actionchains是selenium里面专门处理鼠标相关的操作如:鼠标移动,鼠标按钮操作,按键和上下文菜单(鼠标右键)交互。...

3615
来自专栏州的先生

在Selenium中进行网页元素定位的诸种方法

1383
来自专栏全沾开发(huā)

总结CSS3新特性(Animation篇)

总结CSS3新特性(Animation篇) 动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@k...

3226
来自专栏何俊林

OpenGL中 Canvas 性能分析

本文将通过分析部分源码,描述 Android 里面的 Canvas 的大致实现。并且会对 Canvas 的性能做一定分析,提供对 Canvas 的使用建议。

1893

扫码关注云+社区