个人博客html5雪花飘落代码JS特效下载

简介: 如何给自己的网站/页面添加雪花代码、特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的。特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果。

在网上搜索了几种雪花效果,做了简单的修改,在这里给大家分享下。将代码添加到你的页面就可以了。

1、唯美浪漫雪花飘落jquery特效代码。演示页面:http://www.bokequ.com/winter/。代码添加如下:

  1. <scriptsrc="http://www.bokequ.com/winter/templets/xq/js/snowy.js"></script>
  2. <styletype="text/css">
  3. .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}</style>
  4. <divclass="snow-container"></div>

2、冬季HTML5 3D雪花斜着飘落动画场景特效

演示页面:

http://www.bokequ.com/blog/12/

http://www.bokequ.com/blog/xue2/

代码添加如下:

  1. <scriptsrc="http://www.bokequ.com/winter/templets/xq/js/snowy.js"></script>
  2. <scriptsrc="http://www.bokequ.com/blog/12/js/Snow.js"></script>
  3. <styletype="text/css">
  4. .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
  5. </style>
  6. <divclass="snow-container"></div>

3、html5 canvas制作3D逼真冬天雪景雪花飘场景

演示页面:

http://www.bokequ.com/blog/14/

http://www.bokequ.com/blog/xue1/

代码添加如下:

  1. <scriptsrc="http://www.bokequ.com/winter/templets/xq/js/snowy.js"></script>
  2. <scriptsrc="http://www.bokequ.com/blog/14/js/Snow.js"></script>
  3. <styletype="text/css">
  4. .snow-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;}
  5. </style>
  6. <divclass="snow-container"></div>

4、平安夜/圣诞夜jquery snow.js雪花飘落效果 (适用于平安夜,圣诞节背景可改,雪花的密度,尺寸均可改(代码内有说明),须引入jquery库,简单好用。)

演示页面:http://www.bokequ.com/blog/xue3/

5、html5 canvas散开变大雪花动画特效 演示页面:http://www.bokequ.com/blog/xue/

以上是使用javascript实现雪花飘落的效果代码,可以根据个人喜爱修改,更多好看网页雪花特效代码欢迎分享。

目录
相关文章
|
20天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
102 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
18天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
46 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
22天前
html实现的文字发散动画效果代码
html实现的文字发散动画效果代码
67 30
|
22天前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
57 29
|
21天前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
5月前
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
50 2
|
5月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
33 5
|
5月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
55 4
|
5月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
35 5
|
5月前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
34 4