<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>科技感六边形动画特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background: #0a0a1a;
font-family: Arial, sans-serif;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.info {
position: fixed;
bottom: 80px;
left: 0;
width: 100%;
text-align: center;
color: rgba(255,255,255,0.7);
font-size: 16px;
z-index: 2;
pointer-events: none;
}
/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
background: rgba(0,0,0,0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}
.custom-link:hover {
color: white;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="hexCanvas"></canvas>
<div class="info">移动鼠标与六边形互动</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('hexCanvas');
const ctx = canvas.getContext('2d');
// 设置canvas尺寸为窗口大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 鼠标位置
const mouse = { x: null, y: null };
window.addEventListener('mousemove', function(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
// 六边形参数
const hexSize = 60;
const hexHeight = Math.sqrt(3) * hexSize;
const cols = Math.ceil(canvas.width / (hexSize * 1.5)) + 1;
const rows = Math.ceil(canvas.height / hexHeight) + 1;
// 六边形类
class Hexagon {
constructor(x, y) {
this.x = x;
this.y = y;
this.baseX = x;
this.baseY = y;
this.size = hexSize;
this.points = [];
this.color = getRandomColor();
this.targetColor = getRandomColor();
this.colorProgress = 0;
this.alpha = 0.3 + Math.random() * 0.7;
this.angle = Math.random() * Math.PI * 2;
this.rotationSpeed = (Math.random() - 0.5) * 0.01;
this.pulseSize = 0;
this.pulseSpeed = Math.random() * 0.02 + 0.01;
}
update() {
// 颜色过渡
this.colorProgress += 0.005;
if (this.colorProgress >= 1) {
this.colorProgress = 0;
this.color = this.targetColor;
this.targetColor = getRandomColor();
}
// 鼠标互动
const dx = mouse.x - this.x;
const dy = mouse.y - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 150) {
const force = (150 - distance) / 50;
this.x += dx / distance * force;
this.y += dy / distance * force;
} else {
this.x += (this.baseX - this.x) * 0.1;
this.y += (this.baseY - this.y) * 0.1;
}
// 旋转和脉动
this.angle += this.rotationSpeed;
this.pulseSize = Math.sin(Date.now() * this.pulseSpeed) * 5;
// 计算六边形顶点
this.points = [];
for (let i = 0; i < 6; i++) {
const angle = this.angle + i * Math.PI / 3;
const radius = this.size + this.pulseSize;
this.points.push({
x: this.x + Math.cos(angle) * radius,
y: this.y + Math.sin(angle) * radius
});
}
}
draw() {
// 计算当前颜色
const r = Math.floor(this.color.r + (this.targetColor.r - this.color.r) * this.colorProgress);
const g = Math.floor(this.color.g + (this.targetColor.g - this.color.g) * this.colorProgress);
const b = Math.floor(this.color.b + (this.targetColor.b - this.color.b) * this.colorProgress);
ctx.globalAlpha = this.alpha;
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
// 绘制六边形
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (let i = 1; i < 6; i++) {
ctx.lineTo(this.points[i].x, this.points[i].y);
}
ctx.closePath();
ctx.fill();
// 绘制边框
ctx.strokeStyle = `rgba(${r}, ${g}, ${b}, 0.8)`;
ctx.lineWidth = 1;
ctx.stroke();
}
}
// 生成随机颜色
function getRandomColor() {
const hue = Math.floor(Math.random() * 360);
return {
r: Math.floor(Math.sin(hue * Math.PI / 180 + 0) * 127 + 128),
g: Math.floor(Math.sin(hue * Math.PI / 180 + 2) * 127 + 128),
b: Math.floor(Math.sin(hue * Math.PI / 180 + 4) * 127 + 128)
};
}
// 创建六边形网格
const hexagons = [];
for (let y = -hexHeight; y < canvas.height + hexHeight; y += hexHeight) {
for (let x = -hexSize * 1.5; x < canvas.width + hexSize * 1.5; x += hexSize * 1.5) {
const offset = (Math.floor(y / hexHeight) % 2) * hexSize * 0.75;
hexagons.push(new Hexagon(x + offset, y));
}
}
// 动画循环
function animate() {
requestAnimationFrame(animate);
// 清除画布
ctx.fillStyle = 'rgba(10, 10, 26, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制所有六边形
hexagons.forEach(hex => {
hex.update();
hex.draw();
});
}
// 初始化动画
animate();
});
</script>
</body>
</html>
扫一扫
497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
