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

杨逸轩

发布于 2018-06-14 10:15:27

1.9K0

发布于 2018-06-14 10:15:27

文章被收录于专栏：杨逸轩 ' sBlog杨逸轩 ' sBlog

哈，大家元旦节快乐哈！

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

原地址：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 元素

例如：