哈,大家圣诞节快乐哈
今年圣诞恰逢周六日,如果平时有看我博客的都知道最近博客增加了下雪效果吧
像是这样
怎样,还不错吧
这里是调用了 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 条评论
与博主谈论人生经验?