html线条动态背景(线条随鼠标变动)

硅谷探秘者 1533 0 0
样式

 

js代码

记得引入jq

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></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", "255,97,6"),
			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.onresize = o,
		window.onmousemove = function (n) {
			n = n || window.event, y.x = n.clientX, y.y = n.clientY
		},
		window.onmouseout = 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)
}();

 

猜你喜欢
java基础 1418 ”。线程对象被创建后,其它线程调用了该对象的start()方法,从而来启线程。例如,thread.start()。处于就绪状线程,时可能被CPU调度执行。3.运行状(Running):线程获取C
java基础 2631 java启线程的三种方式1.继承Thread类,重写run方法,调用start方法启线程2.实现Runnable接口,重写run方法,调用start方法启线程3.实现Callable接口代码如
weblog 573 css样式化的宽度!DOCTYPEhtmlhtmlheadmetacharset="utf-8"/title/title/headbodydivstyle="width:500px
official 319 cpu资源和锁资源)并且释放锁记,jvm会把该线程放入等待池中,而且不会自唤醒该线程,必须由其他线程调用同一锁对象的notify方法或notifyAll方法或者wait时间到则该线程进入锁池状,并根
前端(h5) 1057 1.生成树状目录结构基于上篇文章,模拟使用线性顺序的h签生成了树状的目录结构,只是数据结构的化,本文将使用实际案例,实现生成目录结构并实现点击定位平滑移。2.案例点击目录结构的title,页面
weblog 1106 vue件渲染!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js/vue.min.js"/script
java基础 2907 描述的是Java方法执行的线程内存模型:每个方法被执行的时候,Java虚拟机都会同步创建一个栈帧[1](StackFrame)用于存储局部量表、操作数栈、连接、方法出口等信息。每一个方法被调用直
java springboot 1054 涉及知识点:java编译,java反射,io流,java文件操作,输入输出重定向,多线程与线程安全,mysql数据库设计等,理解起来难度较高。下面是我自己设计的几个问题,和一些测试数据。排序问题
归档
2018年11月  12 2018年12月  33 2019年01月  28 2019年02月  28 2019年03月  32 2019年04月  27 2019年05月  33 2019年06月  6 2019年07月  12 2019年08月  12 2019年09月  21 2019年10月  8 2019年11月  15 2019年12月  25 2020年01月  9 2020年02月  5 2020年03月  16 2020年04月  4 2020年06月  1 2020年07月  7 2020年08月  13 2020年09月  9 2020年10月  5 2020年12月  3 2021年01月  1 2021年02月  5 2021年03月  7 2021年04月  4 2021年05月  4 2021年06月  1 2021年07月  7 2021年08月  2 2021年09月  8 2021年10月  9 2021年11月  16 2021年12月  14 2022年01月  7 2022年05月  1 2022年08月  3 2022年09月  2
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础
目录
余生别太较劲,放过自己 才会幸福。