六边形酷科技特效单页源码

源码介绍

基于canvas画布绘制多个六边形追踪鼠标,科技感的几何图形酷炫动画特效,

单页html源码,可以做网站动态背景,喜欢的朋友可以拿去

效果截图

liubianxing.gif

完整源码


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas六角型</title>
<!--QQ沐编程 www.qqmu.com 学习QQ群:290987565  域名抢注 https://www.juming.com/t/33210x2a49c4 -->
<style>
body {background: black;overflow: hidden;/* cursor: none; */
}
</style></head>
<body><canvas id='canvas-club'></canvas><script>
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;var c = document.getElementById("canvas-club");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var ctx = c.getContext("2d");var maxParticles = 30;
var particles = [];
var hue = 183;mouse = {};
mouse.size = 200;
mouse.x = mouse.tx = w/2;
mouse.y = mouse.ty = h/2;var clearColor = "rgba(0, 0, 0, .2)";function random(min, max){return Math.random() * (max - min) + min
}function distance(x1, y1, x2, y2){return Math.sqrt( (x1-x2)*(x1-x2) + (y1-y2)*(y1-y2) );
}function P(){}P.prototype = {init: function(){this.size = this.origSize = random(10, 100);this.x = random(0, w);this.y = Math.random() > .5 ? -this.size : h + this.size;this.speed = this.origSpeed = random(.01, .03);},draw: function(){this.distanceFromMouse = distance(this.x, this.y, mouse.x, mouse.y);ctx.strokeStyle = "hsla("+hue+", 90%, 50%, 1)";ctx.shadowColor = "hsla("+hue+", 100%, 55%, 1)";ctx.shadowBlur = this.size * 2;ctx.beginPath();ctx.moveTo(this.x + this.size * Math.cos(0), this.y + this.size *  Math.sin(0));for(var i=0; i<6; i++){ctx.lineTo(this.x + this.size * Math.cos(i * 2 * Math.PI / 6), this.y + this.size * Math.sin(i * 2 * Math.PI / 6));}   ctx.closePath();ctx.lineWidth = 3;ctx.stroke();this.update();},update: function(){if(this.distanceFromMouse > 20){this.x += (mouse.x - this.x) * this.speed;this.y += (mouse.y - this.y) * this.speed;if(this.distanceFromMouse < mouse.size){this.size += (0 - this.size) * this.speed;this.speed += .01;} else {this.size += (this.origSize - this.size) * this.speed;}} else {this.init();}}
}mouse.move = function(){if(!distance(mouse.x, mouse.y, mouse.tx, mouse.ty) <= .1){mouse.x += (mouse.tx - mouse.x) * .2;mouse.y += (mouse.ty - mouse.y) * .2;} 
};mouse.touches = function(e) {var touches = e.touches;if(touches){mouse.tx = touches[0].clientX;mouse.ty = touches[0].clientY;} else {mouse.tx = e.clientX;mouse.ty = e.clientY;}e.preventDefault();
};mouse.mouseleave = function(e){mouse.tx = w/2;mouse.ty = h/2;
};window.addEventListener("mousemove", mouse.touches);
window.addEventListener("touchstart", mouse.touches);
window.addEventListener("touchmove", mouse.touches)c.addEventListener("mouseleave", mouse.mouseleave)window.addEventListener("resize", function(){w = c.width = window.innerWidth;h = c.height = window.innerHeight;
});for(var i=1; i<=maxParticles; i++) {setTimeout(function(){var p = new P();p.init();particles.push(p);}, i * 50);
}function anim(){ctx.fillStyle = clearColor;ctx.shadowColor = clearColor;ctx.shadowBlur = 0;ctx.globalCompositeOperation = "source-over";ctx.fillRect(0,0,w, h);mouse.move();for(var i in particles){var p = particles[i];p.draw();}hue++;requestAnimationFrame(anim);
}anim();</script>
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?c8249987b56687e1763167bfea967a61";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);
})();
</script>
<!--QQ沐编程 www.qqmu.com 学习QQ群:290987565  域名抢注 https://www.juming.com/t/33210x2a49c4 -->
</body>
</html>

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

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

相关文章

基于Kubernetes集群1.27.3构建ElasticSearch-7集群

基于Kubernetes集群构建ES集群 作者:行癫(盗版必究) 一:环境准备 1.Kubernetes集群环境 节点地址Kubernetes-Master10.9.12.206Kubernetes-Node-110.9.12.205Kubernetes-Node-210.9.12.204Kubernetes-Node-310.9.12.203DNS服务器10.9.12.210代理服务器10.9.12.209NFS存储1…

java之逻辑运算符

在java中&#xff0c;逻辑与的表示方法 && 逻辑或的表示方法 || 逻辑非为! 除了逻辑非是一元运算符之外&#xff0c;其他的都是二元运算符。 逻辑运算符的值必须是boolean型 假定两个变量&#xff0c;a和b&#xff0c;true用对表示&#xff0c;fals用错表示 a对&…

项目7-音乐播放器3(删除模块+播放音乐模块设计)

1.播放音乐模块设计 1.1 请求响应设计 请求&#xff1a; { get, /music/get?pathxxx.mp3 } 响应&#xff1a; { 音乐数据本身的字节信息 } 1.2 后端代码 1. Files.readAllBytes(String path) : 读取文件中的所有字节&#xff0c;读入内存 &#xff…

玄子Share-揭开5G神秘面纱

玄子Share-揭开5G神秘面纱 移动通信发展历程 在移动通信领域&#xff0c;常听到3G、4G的术语 G是Generation的简写&#xff0c;每一个G&#xff0c;都代表了移动通信的一个发展阶段&#xff0c;也是一个时代移动通信技术从 20 世纪 80 年代诞生开始&#xff0c;历经这 30 多…

SpringBoot集成FTP

1.加入核心依赖 <dependency><groupId>commons-net</groupId><artifactId>commons-net</artifactId><version>3.8.0</version></dependency> 完整依赖 <dependencies><dependency><groupId>org.springfra…

深度学习配置环境AllInOne

总结深度学校ubuntu环境配置 目录 0.前提工作0. nvidia驱动安装1.CudaTookits安装2. cuDNN安装3.conda安装3.0 conda基本概念3.1 系统python版本确认3.2 miniconda安装3.3 ~~conda迁移~~3.4 附4.pytorch安装5. git安装5.1 git命令行安装5.2 git-gui安装0.前提工作 安装顺序:n…

蛋白质亚细胞定位预测(生物信息学工具-017)

直奔主题&#xff0c;下面这张表图怎么制作&#xff0c;一般都是毕业论文hh&#xff0c;蛋白质的亚细胞定位如何预测&#xff1f; 01 方法 https://wolfpsort.hgc.jp/ #官网小程序&#xff0c;简单好用&#xff0c;不用R包&#xff0c;python包&#xff0c;linux程序&#x…

微服务使用SockJs+Stomp实现Websocket 前后端实例 | Vuex形式断开重连、跨域等等问题踩坑(一)

大家好&#xff0c;我是程序员大猩猩。 之前几篇文章&#xff0c;我们讲了Spring Cloud Gateway的轻量级实现&#xff0c;Nginx的配置概念与实现&#xff0c;如以下往期文章。 轻量级的Spring Cloud Gateway实践&#xff0c;实现api和websocket转发轻松实现Nginx的HTTP与WebS…

基于Springboot+Vue的Java项目-网上超市系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

平衡二叉树(后序遍历,力扣110)

解题思路&#xff1a;采取后序遍历的好处是先遍历节点得到高度&#xff0c;然后再判断高度差是否大于一&#xff0c;如果是的话就返回-1&#xff0c;不是就返回两高度中较大的高度加一就是父节点的高度 具体代码如下&#xff1a; class Solution { public: int travel(TreeN…

图搜索算法详解

图搜索算法是一系列用于遍历图结构的算法&#xff0c;图是由节点&#xff08;也称为顶点&#xff09;和连接这些节点的边组成的数据结构。这些算法在众多领域都有应用&#xff0c;例如社交网络分析、路径规划、数据挖掘和推荐系统等。以下是图搜索算法的详解&#xff1a; 基本…

springboot+PageHelper在多数据源的情况下,数据库方言乱套怎么解决?

web项目必然会涉及到数据分页&#xff0c;而PageHelper是个不错的插件&#xff0c;能方便不少事。 在最近的一个项目中&#xff0c;需要聚合多方数据&#xff0c;就涉及到配置多数据源&#xff08;各方使用的不是一种类型的数据库&#xff09;&#xff0c;开始以为正常配置就好…

# 从浅入深 学习 SpringCloud 微服务架构(三)注册中心 Eureka(2)

从浅入深 学习 SpringCloud 微服务架构&#xff08;三&#xff09;注册中心 Eureka&#xff08;2&#xff09; 段子手168 1、搭建 EurekaServer 注册中心&#xff0c;使用 Eureka 的步骤&#xff1a; 1&#xff09;搭建 EurekaServer 创建工程&#xff0c;导入依赖坐标&…

论文阅读-Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024)

标题: Multiple Targets Directed Greybox Fuzzing (Hongliang Liang,2024) 作者: Hongliang Liang, Xinglin Yu, Xianglin Cheng, Jie Liu, Jin Li 期刊: IEEE Transactions on Dependable and Secure Computing 研究问题: 发现局限性&#xff1a;之前的定向灰盒测试在有…

“中医显示器”是人体健康监测器

随着科技的进步&#xff0c;现代医学设备已经深入到了人们的日常生活中。然而&#xff0c;在这个过程中&#xff0c;我们不应忘记我们的医学根源&#xff0c;中医。我们将中医的望、闻、问、切四诊与现代科技相结合&#xff0c;通过一系列的传感器和算法将人体的生理状态以数字…

部署Hyperledger Fabric测试区块链网络

一. 快速启动区块链测试网络 启动Fabric虚拟机 将 fabric-samples.zip 拷贝进虚拟机 ubzip fabric-samples.zip 解压并重命名为fabric-samples mv fabric-samples-main fabric-samples 拷贝bin和config目录 cd fabric-samples cp ~/fabric/bin bin -r cp ~/fabric/config …

圣地亚哥 Toler 小学利用School AI帮助每个学生都有自己的聊天机器人,提高学习兴趣和效率

圣地亚哥 Toler 小学利用 AI 程序 SchoolAI 平台为学生创建个性化的聊天机器人&#xff0c;帮助他们更好地学习和提问。这个 AI 程序让学生可以在几秒钟内得到问题的答案&#xff0c;激发了他们提出更多问题的好奇心。 管理、调节和指导学生如何通过任务控制使用人工智能。 当…

Linux程序的地址空间,进程终止

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 一.程序的地址空间 1.1程序的地址空间的引入 我们知道frok可以创建…

【SpringBoot实战篇】获取用户详细信息

1 明确需求 1需要获取用户详细信息 2 接口文档 1基本信息 2请求参数 无 3 响应数据 响应数据类型&#xff1a;application/json 响应参数说明&#xff1a; 响应数据样例 3 思路分析 1用户名在请求头里获取 4 开发 4.1 控制器usercontroller GetMapping("/userInfo")p…

实用软件与高效工具汇总(持续更新...)

名人说&#xff1a;莫愁千里路&#xff0c;自有到来风。 ——钱珝 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 一、软件1、文件搜索类2、截图贴图类3、软件卸载类4、录屏gif类5、护眼调光类6、流程绘图类7、图片…