文章简介

圣诞节就快要到了,如果你也和我一样总感觉自己的网页上少了些许氛围。那一定得试试这个冬季专属的雪花特效了。
加上以后网页瞬间感觉入冬了。

效果展示

是不是感觉加了雪花以后氛围感duanduan的上来了~
预览地址 : https://blogs.mrxie.xyz

开始使用

如果你想在你的网页中使用,可以直接在头部加上脚本：

<script src="https://cdn.mrxie.xyz/jsLib/beauty/snow.min.js"></script>

你也可以下载下来,部署到本地以防止我的网站崩了。
迷你文件如下 :

(function(a){a.fn.snow=function(b){var c=a('\x3cdiv id\x3d"snowbox" /\x3e').css({position:"absolute","z-index":"9999",top:"-50px"}).html("\x26#10052;"),d=a(document).height(),f=a(document).width();b=a.extend({},{minSize:10,maxSize:20,newOn:1E3,flakeColor:"#AFDAEF"},b);setInterval(function(){var e=Math.random()*f-100,g=.5+Math.random(),h=b.minSize+Math.random()*b.maxSize,k=d-200,l=e-500+500*Math.random(),m=10*d+5E3*Math.random();c.clone().appendTo("body").css({left:e,opacity:g,"font-size":h,color:b.flakeColor}).animate({top:k,left:l,opacity:.2},m,"linear",function(){a(this).remove()})},b.newOn)}})(jQuery);$(function(){$.fn.snow({minSize:5,maxSize:50,newOn:300})});function snowFall(a){a=a||{};this.maxFlake=a.maxFlake||200;this.flakeSize=a.flakeSize||10;this.fallSpeed=a.fallSpeed||1}requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(a){setTimeout(a,1E3/60)};cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||window.oCancelAnimationFrame;snowFall.prototype.start=function(){snowCanvas.apply(this);createFlakes.apply(this);drawSnow.apply(this)};function snowCanvas(){var a=document.createElement("canvas");a.id="snowfall";a.width=$(document).width();a.height=document.body.clientHeight;a.setAttribute("style","position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");document.getElementsByTagName("body")[0].appendChild(a);this.canvas=a;this.ctx=a.getContext("2d");window.onresize=function(){a.width=$(document).width()}}function flakeMove(a,b,c,d){this.x=Math.floor(Math.random()*a);this.y=Math.floor(Math.random()*b);this.size=Math.random()*c+2;this.maxSize=c;this.speed=1*Math.random()+d;this.fallSpeed=d;this.velY=this.speed;this.velX=0;this.stepSize=Math.random()/30;this.step=0}flakeMove.prototype.update=function(){this.velX*=.98;this.velY<=this.speed&&(this.velY=this.speed);this.velX+=Math.cos(this.step+=.05)*this.stepSize;this.y+=this.velY;this.x+=this.velX;(this.x>=canvas.width||0>=this.x||this.y>=canvas.height||0>=this.y)&&this.reset(canvas.width,canvas.height)};flakeMove.prototype.reset=function(a,b){this.x=Math.floor(Math.random()*a);this.y=0;this.size=Math.random()*this.maxSize+2;this.velY=this.speed=1*Math.random()+this.fallSpeed;this.velX=0};flakeMove.prototype.render=function(a){var b=a.createRadialGradient(this.x,this.y,0,this.x,this.y,this.size);b.addColorStop(0,"rgba(255, 255, 255, 0.9)");b.addColorStop(.5,"rgba(255, 255, 255, 0.5)");b.addColorStop(1,"rgba(255, 255, 255, 0)");a.save();a.fillStyle=b;a.beginPath();a.arc(this.x,this.y,this.size,0,2*Math.PI);a.fill();a.restore()};function createFlakes(){for(var a=this.maxFlake,b=this.flakes=[],c=this.canvas,d=0;d<a;d++)b.push(new flakeMove(c.width,c.height,this.flakeSize,this.fallSpeed))}function drawSnow(){var a=this.maxFlake,b=this.flakes;ctx=this.ctx;canvas=this.canvas;that=this;ctx.clearRect(0,0,canvas.width,canvas.height);for(var c=0;c<a;c++)b[c].update(),b[c].render(ctx);this.loop=requestAnimationFrame(function(){drawSnow.apply(that)})}var snow=new snowFall({maxFlake:60});snow.start();

建议搭载在暗色系的主题上效果更佳,量色系上蓝色雪花颜色不太明显。

资源下载

JS脚本下载:
https://cdn.mrxie.xyz/jsLib/beauty/snow.min.js

圣诞节特别篇：网站美化圣诞雪花相关推荐

pb 查询客户端ip地址_特别篇-SAP 客户端(配置、测试、生产)
特别篇-SAP 客户端(配置.测试.生产) 1.登录SAP系统的途径有两种途径: 一种是通过企业门户网站: 一种是安装SAP GUI,通过GUI登录: 2.什么是SAP 客户端? 看下图图1 图2 ...
HTML5七夕情人节表白网页(圣诞雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤圣诞雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序 ...
网站美化代码系列（持续更新）
网站美化终极奥秘:创作第一,体验第二,避免繁杂,简洁为上! 便宜技术猫贴心的为大家托管了文件,采用CDN加速,为小白省去了代码放置烦恼! 本文章会不定时进行更新.文章涉及有关参考资料.教程.链接如有侵 ...
python 找质数的个数_盘一盘 Python 系列特别篇 All 和 Any
本文含 3758 字,9图表截屏建议阅读 10 分钟本文是 Python 系列的特别篇的第十四篇特别篇 1 - PyEcharts TreeMap 特别篇 2 - 面向对象编程特别篇 3 - 两 ...
玄惭 mysql_阿里云数据库专家玄惭的“武功”全记录之最佳实践、双十一特别篇...
原标题:阿里云数据库专家玄惭的"武功"全记录之最佳实践.双十一特别篇专题简介玄惭,真名罗龙九,阿里云DBA专家,负责阿里云RDS线上稳定以及专家服务团队.他经历过阿里历年双11 ...
乐高计算机发展史教程,【乐高产品发展史特别篇】乐高恐龙发展史
-- 写在前面 -- 2018年6月22日,<侏罗纪世界2:失落王国>全球上映:4月16日,乐高同名系列套装全球发售.恐龙是一个伴随了乐高产品二十余年的主题,其实在一年以前就有这样一个计划 ...
如何用三元组表表示下列稀疏矩阵_盘一盘 Python 系列特别篇21之：SciPy 稀疏矩阵...
引言和稠密矩阵相比,稀疏矩阵的最大好处就是节省大量的内存空间来储存零.稀疏矩阵本质上还是矩阵,只不过多数位置是空的,那么存储所有的 0 非常浪费.稀疏矩阵的存储机制有很多种 (列出常用的五种): C ...
Bootstrap圣诞节主题商城网站模板
简介: 一套精美的圣诞节主题商城网站HTML模板,使用Bootstrap4框架构造,圣诞节礼品促销电子商务网站模板. HTML文件相应组织良好,所以它很容易定制和更新. 网盘下载地址: http:// ...
【情人节特别篇】想知道玫瑰在哪些城市最畅销嘛？
[情人节特别篇]想知道玫瑰在哪些城市最畅销嘛? 前言一.思路分析二.数据爬取 1.数据搜索 2.获取城市经纬度 3.完整代码三.热力分析四.写在最后前言俗话说得好:"人狠话不多, ...

圣诞节特别篇：网站美化圣诞雪花

文章简介

效果展示

开始使用

资源下载

圣诞节特别篇：网站美化圣诞雪花相关推荐

最新文章

热门文章

圣诞节特别篇：网站美化圣诞雪花

文章简介

效果展示

开始使用

资源下载

insertAdIfNeeded();

圣诞节特别篇：网站美化圣诞雪花相关推荐

最新文章

热门文章