canvas 网站背景鼠标吸附线条动画

news/2024/5/20 2:47:47/文章来源:https://blog.csdn.net/HuangsTing/article/details/103988463

完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</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 += 1) {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 += 1) {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>

效果图:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_865462.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记之WEB网站的高可用集群搭建

集群&#xff08;cluster&#xff09; HA (High Availability),是高可用性的一种统称。包括从软件到硬件的多种技术来实现。HA就是有点像是笔记本的电池电源和交流电源一样。平常插着交流电源时。笔记本就一直使用交流电源。当紧急时刻断电时。才会使用电池电源。如果平常使用交…

网站架构--学习笔记

网站架构 网站架构&#xff0c;一般是为了一个目的&#xff0c;当访问的用户越来越多&#xff0c;怎么将更好&#xff0c;更快的服务推送给客户。当然后面的服务器架设是必不可少的。当然这里面需要考虑的也有很多。 硬架构 一、机房的选择&#xff0c;宽带的选择 二、对后台主…

对个人站长建站的3点建议

对于建站前期的选择重不重要&#xff0c;这个我是可以肯定的回答你&#xff1a;是很重要的。我们应该先走好站长的第一步&#xff0c;有了良好的开端&#xff0c;然后就会后续的第二步&#xff0c;第三步。作为新手站长&#xff0c;我们应该更要注重前期的建设。那我们在建站前…

云主机建站的优势

在现如今的快速发展的互联网时代&#xff0c;大多数的企业都是需要通过建设自己企业的网站来实现互联网的营销的&#xff0c;尤其是一些传统的企业。企业在建设网站时&#xff0c;一般的建站公司都会给你提供多种方式以供你选择&#xff0c;目前比较流行的就是利用云主机去建站…

建设电商型网站需要注意的

近年来&#xff0c;随着互联网的普及&#xff0c;电子商务在我国的迅猛发展&#xff0c;互联网商业应用成为很多企业首先选择的途径。然而 &#xff0c;随着电子商务日益走向成熟&#xff0c;以网站托管、网站代运营等新兴电子商务模式开始在国内兴起&#xff0c;传统的网站运营…

企业建站的一些建议

随着互联网的快速发展&#xff0c;现在基本上无论什么企业都会有一个自己的网站&#xff0c;但是这些网站的质量却是参差不齐的&#xff0c;其中就有一部分企业的网站的打开速度是很慢的&#xff0c;这样的网站就和没有是差不多的&#xff0c;甚至还会对企业的形象还会产生负面…

虚拟主机会影响到SEO吗

众所周知&#xff0c;主机是网站的基础&#xff0c;主机的质量性能是会直接影响到网站的。因为只有一个稳定的主机才能保证搜索引擎蜘蛛可以顺利地爬行&#xff0c;才不会影响到网站的排名和权重。 相信各位站长朋友都知道&#xff0c;如果一台主机不稳定的&#xff0c;蜘蛛爬…

独立IP的网站空间有什么优势

独立IP&#xff0c;顾名思义就是同一个IP下只存在自己的站点&#xff0c;不与服务器上的其他站点共享。独立IP空间&#xff0c;就是拥有独立IP的网站空间或虚拟主机。和独立IP对应的是共享IP&#xff0c;即在同一个IP下建立多个站点。由于目前独立IP资源有限&#xff0c;大多数…

如何提升网站速度

现在虚拟主机的用户依旧很多&#xff0c;刚开始还可以&#xff0c;但是随着后期网站页面和数据的增多&#xff0c;网站打开速度就会很慢。这种情况不一定要换更大的空间或者是换成其他的服务器&#xff0c;将网页的代码优化一下或许更可行&#xff0c;在制作主页的时候&#xf…

如何挑选一个适合自己的网站空间,需要注意哪些呢

网站空间在行业内也常被称为虚拟主机空间&#xff0c;通常的中小企业做网站都不会自己架服务器&#xff0c;大部分都是选择虚拟主机来放置网站内容。网站空间是企业存储网站的重要设备&#xff0c;对企业网站有着重要的影响&#xff0c;所以网站空间的选择就变得尤为重要。那么…

云服务器快速安全部署网站

准备&#xff1a; 一.云服务器​&#xff1a;9.5特价服务器&#xff0c;点击文末“阅读原文"购买。 二.FTP工具&#xff0c;网站源码&#xff0c;回复”ECS“获取下载链接​。​ 微信.jpg 本小节的主要内容&#xff1a;在实验提供的ECS服务器中&#xff0c;安装部署Apache…

【网站建设学习笔记001】域名注册及快速添加域名解析

域名注册及快速添加域名解析 目录 【网站建设学习笔记001】域名注册及快速添加域名解析 一、域名注册&#xff1a; 二、快速添加域名解析 三、教程结束&#xff01;&#xff01; 一、域名注册&#xff1a; 需要寻求自己想要建设的网站&#xff0c;给他起个名字&#xff0c;…

【网站建设学习笔记002】域及DNS解析的相关知识扫盲

DNS解析相关知识扫盲 目录 DNS解析相关知识扫盲 一、DNS概念 二、域名的分层结构 三、DNS的分层结构 四、DNS解析过程 五、DNS术语 一、DNS概念 DNS 是域名系统 (Domain Name System) 的缩写&#xff0c;是因特网的一项核心服务&#xff0c;它作为可以将域名和IP地址相互…

网站接入支付宝支付详细步骤

支付宝开放平台文档中心&#xff1a;https://docs.open.alipay.com/catalog 1、 注册支付宝商家 2、 PC站申请【电脑网站支付】、手机站申请【手机网站支付】&#xff1b;自适应网站2个都申请 3、开通支付宝开放平台 4、查看网页&移动应用 就是我们上面签约的电脑支付和手…

网站接入微信支付详细步骤

微信开发文档&#xff1a;https://pay.weixin.qq.com/wiki/doc/api/index.html 1、注册微信支付商家 2、PC站申请【Native支付】、手机站申请【H5支付】&#xff1b;自适应网站2个都申请 3、下载微信支付demo Native支付&#xff1a;https://pay.weixin.qq.com/wiki/doc/api…

腾讯云简单网站设置教程

第一步 安装http服务器 yum install httpd 查看http服务器 httpd -version 启动http服务器 service httpd start 第二步 放项目到/var/www/html 下 第三步 网站访问

在网站底部附上网站备案号

前置条件 备案号已申请通过。本文举例的网站是在腾讯云申请的服务器和域名&#xff0c;管局备案成功后&#xff0c;在全国互联网安全管理服务平台http://www.beian.gov.cn成功备案的。 步骤一 全国互联网安全管理服务平台http://www.beian.gov.cn 你的对应备案联网信息地址为…

php开发模拟基金定投网站

代码上传在github: GitHub - lj102800/simulatedPurchaseOfFunds: 模拟购买基金 采集基金信息来自天天网站&#xff0c;接口为 ​​​​​​http://fund.eastmoney.com/f10/F10DataApi.aspx?typelsjz&code$code&page$p&per200000 策略&#xff1a; 总共有100…

一文搞定!手把手教你文字识别(识别篇:LSTM+CTC, CRNN, chineseocr方法)

个人博客导航页&#xff08;点击右侧链接即可打开个人博客&#xff09;&#xff1a;大牛带你入门技术栈 文字识别是AI的一个重要应用场景&#xff0c;文字识别过程一般由图像输入、预处理、文本检测、文本识别、结果输出等环节组成。 其中&#xff0c;文本检测、文本识别是最…