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

硅谷探秘者 2658 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基础 2651 ”。线程对象被创建后,其它线程调用了该对象的start()方法,从而来启线程。例如,thread.start()。处于就绪状线程,时可能被CPU调度执行。3.运行状(Running):线程获取C
weblog 1122 css样式化的宽度!DOCTYPEhtmlhtmlheadmetacharset="utf-8"/title/title/headbodydivstyle="width:500px
java基础 4391 java启线程的三种方式1.继承Thread类,重写run方法,调用start方法启线程2.实现Runnable接口,重写run方法,调用start方法启线程3.实现Callable接口代码如
official 816 cpu资源和锁资源)并且释放锁记,jvm会把该线程放入等待池中,而且不会自唤醒该线程,必须由其他线程调用同一锁对象的notify方法或notifyAll方法或者wait时间到则该线程进入锁池状,并根
前端(h5) 1841 1.生成树状目录结构基于上篇文章,模拟使用线性顺序的h签生成了树状的目录结构,只是数据结构的化,本文将使用实际案例,实现生成目录结构并实现点击定位平滑移。2.案例点击目录结构的title,页面
weblog 1605 vue件渲染!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js/vue.min.js"/script
java springboot 1726 涉及知识点:java编译,java反射,io流,java文件操作,输入输出重定向,多线程与线程安全,mysql数据库设计等,理解起来难度较高。下面是我自己设计的几个问题,和一些测试数据。排序问题
java基础 3484 描述的是Java方法执行的线程内存模型:每个方法被执行的时候,Java虚拟机都会同步创建一个栈帧[1](StackFrame)用于存储局部量表、操作数栈、连接、方法出口等信息。每一个方法被调用直
归档
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 2022-10  2 2022-12  5 2023-01  3 2023-02  1 2023-03  4 2023-04  2 2023-06  3 2023-07  4 2023-08  1 2023-10  1 2024-02  1 2024-03  1 2024-04  1
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础 xxl-job rabbitmq haproxy srs 音视频 webrtc javascript
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。