非常魔性的网站背景添加彩带效果JS代码分享
今天在网上找到了一段非常魔性的JS代码，可以实现网站背景彩带效果，就是本站现在的效果。感觉挺不错的，分享一下网站添加彩带效果的方法。效果下看图
原理：
利用ribbon.min.js脚本实现单击鼠标，彩带背景随机变换的网站背景效果，效果可见我的网站，很是有魔性。
特性：
这段代码不依赖于 jQuery 和 JavaScript 框架
轻量级，脚本只有 1.15kb 大小
非常容易使用
使用：
1、下载ribbon.min.js脚本文件：点击下载
2、通过FTP等方法上传到自己网站上，得到脚本的URL链接。
3、添加下面代码到网站</body>标签之前即可，或者直接复制下面的代码新建一个JS文件，然后上传到网站引用。
/**
* Copyright (c) 2016 hustcc
* License: MIT
* Version: v1.0.1
* GitHub: https://github.com/hustcc/ribbon.js
**/
!function(){function e(e,t,n){return Number(e.getAttribute(t))||n}function t(){for(r.clearRect(0,0,h,s),a=[{x:0,y:.7*s+u},{x:0,y:.7*s-u}];a[1].x<h+u;)n(a[0],a[1])}function n(e,t){r.beginPath(),r.moveTo(e.x,e.y),r.lineTo(t.x,t.y);var n=t.x+(2*p()-.25)*u,o=i(t.y);r.lineTo(n,o),r.closePath(),m-=x/-50,r.fillStyle="#"+(127*y(m)+128<<16|127*y(m+x/3)+128<<8|127*y(m+x/3*2)+128).toString(16),r.fill(),a[0]=a[1],a[1]={x:n,y:o}}function i(e){return l=e+(2*p()-1.1)*u,l>s||l<0?i(e):l}var o=document.getElementsByTagName("script"),c=o[o.length-1];config={z:e(c,"zIndex",-1),a:e(c,"alpha",.6),s:e(c,"size",90)};var a,l,d=document.createElement("canvas"),r=d.getContext("2d"),g=window.devicePixelRatio||1,h=window.innerWidth,s=window.innerHeight,u=config.s,f=Math,m=0,x=2*f.PI,y=f.cos,p=f.random;d.width=h*g,d.height=s*g,r.scale(g,g),r.globalAlpha=config.a,d.style.cssText="position:fixed;top:0;left:0;z-index: "+config.z+";width:100%;height:100%;pointer-events:none;opacity:0.5;",document.getElementsByTagName("body")[0].appendChild(d),document.onclick=t,document.ontouchstart=t,t()}();
本站附件分享，如果附件失效，可以去找找看
