html5超酷炫的js背景插件【canvas-nest.js】html5超酷炫的js背景插件【canvas-nest.js】

从前 车马很慢
书信很远 一生只够爱一个人
Hi, 请登录     我要注册     找回密码

html5超酷炫的js背景插件【canvas-nest.js】

之前在某个博客网站上看到过,觉得好酷炫,当时也没多想怎么写的。ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

今天正好想给博客加点东西,然后就在网上搜索了一下,找到了一些相关的特效代码,接下来就分享给大家,这里先分享两种代码,以后在慢慢补充,大家喜欢哪种就用哪种吧,背景特效跟本站首页效果一样。ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
第一种:直接调用外部js插件:canvas-nest.js
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
github地址:https://github.com/hustcc/canvas-nest.jsABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

说明:使用方法很简单,只需要再body中间插入这段js代码即可,注意不要放在head里面。ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

<html>
<head>
    ...
</head>
<body>
    ...
    ...
    ...
<script src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
</body>
</html>

配置:颜色:默认是(0,0,0),格式是(R,G,B)ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

   透明度:(0-1),默认0.5ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

   线段的数量:默认0.5ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

     Z轴:默认-1ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
第二种:直接在页面中加入js代码:
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

<!--代码放置于</body>上方-->ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 <script>ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 !function(){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 function n(n,e,t){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 return n.getAttribute(e)||tABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 function e(n){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 return document.getElementsByTagName(n)ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 function t(){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 var t=e("script"),o=t.length,i=t[o-1];ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 return{ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 function o(){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeightABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 function i(){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 r.clearRect(0,0,a,c);ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 var n,e,t,o,m,l;ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 s.forEach(function(i,x){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }),ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 x(i)ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 var a,c,u,m=document.createElement("canvas"),ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 d=t(),l="c_n"+d.l,r=m.getContext("2d"),ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 function(n){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 window.setTimeout(n,1e3/45)ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 },ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 window.onmousemove=function(n){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 n=n||window.event,y.x=n.clientX,y.y=n.clientYABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 },ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 window.onmouseout=function(){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 y.x=null,y.y=nullABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 };ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 for(var s=[],f=0;d.n>f;f++){ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 u=s.concat([y]),ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 setTimeout(function(){i()},100)ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 }();ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
 </script>
 

ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
最后给大家分享三种页面背景效果:ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
第一种:粒子连线效果 点击预览ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站
第二种:点击预览
ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

第三种:点击预览ABw北洋博客-分享新鲜科技、互联网和IT技术的个人原创boke网站

赞() 打赏
未经允许不得转载:JS特效 » html5超酷炫的js背景插件【canvas-nest.js】
分享到: 更多 (0)

本站友链交换和投稿功能正在建设中......

友链交换我要投稿

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏