网页设置蛛网动态背景
2024-04-18 02:56:02
效果演示
代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>动态鼠标蜘蛛网特效</title>
</head>
<body>
</body>
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
</html>
关键代码
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
源码写法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>动态鼠标蜘蛛网特效</title> </head>
<body> </body>
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<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.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)
} ();
</script>
</html>
网页设置蛛网动态背景相关推荐
- uniapp 设置 style 动态背景
uniapp采坑总结 <view class="uni-comment-list" :style="[{backgroundImage:'url(' + imgUr ...
- uniapp设置页面动态背景图
<view class="container pt-15" :style="{backgroundImage:'url('+detailInfo.mapImg+') ...
- windows网页设置为桌面背景
这个,转载别人的,亲测有用且免费: Wallpaper Engine软件--html做为壁纸_残暴的菜鸟的博客-CSDN博客_html壁纸
- html设置流星动态背景,纯CSS流星雨背景
插件预览图 使用教程 代码展示 vue页面使用 Style .space { width: 100%; height: 100vh; background: #121212; overflow: hi ...
- 微信小程序：enablePullDownRefresh、onReachBottomDistance 、动态设置窗口的背景色、动态设置下拉背景字体
一.enablePullDownRefresh 1.下拉刷新enablePullDownRefresh的支持 单页面配置json文件 {"enablePullDownRefresh" ...
- vscode怎么设置动态背景
vscode怎么设置动态背景 1.在vscode插件中下载background插件 2.选择->首页->首选项->设置 or ctrl+, 3.在设置中搜索background 点击 ...
- Hexo之静态+动态背景设置
写在前面 实现背景图更换及平铺,以及引入动态背景(可交互) 静态background设置 打开博客根目录/themes/next/source/css/_custom/custom.styl文件,编辑 ...
- 用Canvas为网页添加动态背景
用Canvas为网页添加动态背景 作者:uedtianji 最近刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务.考虑到页面只在手机中浏览,而且手机对canvas的支持又非常好, ...
- 网页动态背景——随鼠标变换的动态线条（鼠标蜘蛛网特效）
网页动态背景--随鼠标变换的动态线条 效果图如下 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv=& ...
最新文章
- mysql学习之旅-数据库自动备份-测试环境搭建
- 软件官网与memcached介绍
- 修改putty远程登录控制台的字体
- WPS for MacOS如何设置自动句首字母大写
- 如何在一分钟内实现微服务系统下的架构可视化
- LeetCode 203. Remove Linked List Elements
- FAR，NEAR区别
- iscsi-target
- 解决Linux系统中python matplotlib画图的中文显示问题
- 【Yii框架系列一】Yii中CDbCriteria常用总结
- java 表格树_00030-layui+java 树形表格treeTable
- 4：JAVA UUID 生成
- 阶段3 3.SpringMVC·_07.SSM整合案例_08.ssm整合之Spring整合MyBatis框架
- 11月 第4周 GitChat 话题排行榜
- sox处理mp3_sox 转码 amr转MP3
- 演示4：python的币值转换-含tkinter
- echart旭日图_echarts（10）：旭日图
- 微软模拟飞行10教程
- 基于SSM实现高校教材管理系统
- 瑞森助您实现优秀的LLC恒流LED照明方案
热门文章
- java多线程霓虹灯,Android 霓虹灯
- linux系统中arp老化时间计算,Linux实现的ARP缓存老化时间原理解析
- python信用卡违约预测分析_数据挖掘实战（1）：信用卡违约率分析
- 当前使用的个人计算机中在cpu内部,信息技术基础第一章复习题库.docx
- confluence脑裂
- python学习笔记：去掉python字符串中空格的方法总结
- 计算机关机时间设置方法,如何设置计算机的预定关机时间，教您如何设置计算机的预定关机时间...
- 云呐|固定资产管理系统和备件如何日常维护管理
- android 壁纸改变回调,Android Launcher分析和修改13——实现Launcher编辑模式(1) 壁纸更换...
- html常见的块元素与内联（行内）元素用法说明