给网页添加跟随你鼠标移动的线条动画

在博客的设置页面，将以下代码复制到 ”博客侧边栏公告”中，即可：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet">
</head>
<body><script>
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){r.clearRect(0,0,a,c);var n,e,t,o,m,l;s.forEach(function(i,x){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],null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),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()))}),x(i)}var a,c,u,m=document.createElement("canvas"),d=t(),l="c_n"+d.l,r=m.getContext("2d"),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},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.οnresize=o,window.οnmοusemοve=function(n){n=n||window.event,y.x=n.clientX,y.y=n.clientY},window.οnmοuseοut=function(){y.x=null,y.y=null};for(var s=[],f=0;d.n>f;f++){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})}u=s.concat([y]),setTimeout(function(){i()},100)}();
</script>
</body>
</html>

转载于:https://www.cnblogs.com/yhaing/p/7852416.html

给网页添加跟随你鼠标移动的线条动画相关推荐

jQuery/跟随鼠标移动的线条动画（变换线条）
效果图代码部分 <script> !function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){retu ...
如何在网页中禁止使用鼠标右键？几种方法和大家分享
如何在网页中禁止使用鼠标右键方法一:最简单的方法 <SCRIPT language="JavaScript"> function click() { if(event ...
HTML学习笔记4：如何给网页添加图片和超链接
今天,我学习了如何给网页添加图片和超链接,学习html越多,我就可以给网页增添越多的元素,就像我精心培育的一篇花圃,今天迎进紫罗兰,明天种下红玫瑰,学到越多的技能,我就越开心,越期待春风拂过惺忪的大地 ...
给网页添加背景图片1
我们在打开博客的时候,有时会看到有的网页添加了背景图片.从而让网页增加了不少的乐趣.一个好的背景可以更好体现网站的风格.也让自己的网站与众不同.赏心悦目的图片可以让人眼前一亮. 同样,我们在网站制作过 ...
mac php怎么做网页,Mac_mac系统中safari怎么添加书签? 把常用网页添加到收藏夹的效果，苹果电脑mac系统自带safari浏览 - phpStudy...
mac系统中safari怎么添加书签? 把常用网页添加到收藏夹的效果苹果电脑mac系统自带safari浏览器与普通的win系统是不一样的,收藏常用的网页也是不一样的,下面是将你常用的网页加入到书签里 ...
网页添加Live 2D看板娘超简单教程——伸手即可带走
什么是看板娘?移目至左下角,这就是看板娘! 什么?没出来?鼠标放上去只有文字?那是因为源代码放在GitHub上,GitHub国外的网站,国内加载的慢啊,稍稍等一下啦,客官也可以亲自去GitHub拉源代 ...
给你的网页添加看板娘（以给博客园博客添加看板娘为例）（保姆级图文）
步骤系列文章前言 1.下载看板娘资源 2.上传资源到文件 3.在设置中调用资源 4.看看效果总结系列文章提示:转到日常小技巧专栏,观看更多内容! 点我直达–>日常小技巧专栏前言给你 ...
网页中跟随系统，适配 macOS 的夜间模式，暗黑模式 dark-mode：prefers-color-scheme: dark
网页中跟随系统,适配 macOS 的夜间模式,暗黑模式 dark-mode 参阅: https://css-tricks.com/a-complete-guide-to-dark-mode-on-th ...
网页添加马赛克模糊插件工具
介绍: 这是一款能够为你添加网页模糊特效的工具,在浏览网页时因故需要离开电脑, 可以为你的网页添加任意马赛克效果,以便保护自己的隐私,避免被他人窥屏! 功能介绍: 安装Blur the body插件后 ...

给网页添加跟随你鼠标移动的线条动画

给网页添加跟随你鼠标移动的线条动画相关推荐

最新文章

热门文章