当前位置:   article > 正文

六边形酷科技特效单页源码_html前端登录页面特效六边形跟着鼠标

html前端登录页面特效六边形跟着鼠标

源码介绍

基于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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号