<!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: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Arial', sans-serif;
}
canvas {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
text-align: center;
color: #fff;
max-width: 800px;
padding: 20px;
}
h1 {
font-size: 3em;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(0, 150, 255, 0.7);
animation: glow 2s infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 5px rgba(0, 150, 255, 0.5);
}
to {
text-shadow: 0 0 15px rgba(0, 150, 255, 0.9);
}
}
p {
font-size: 1.2em;
line-height: 1.6;
margin-bottom: 30px;
color: rgba(255, 255, 255, 0.8);
}
.link {
margin-top: 40px;
}
.link a {
display: inline-block;
padding: 12px 30px;
color: #fff;
text-decoration: none;
border: 1px solid rgba(0, 150, 255, 0.5);
border-radius: 30px;
background: rgba(0, 150, 255, 0.1);
transition: all 0.3s;
font-size: 1.1em;
}
.link a:hover {
background: rgba(0, 150, 255, 0.3);
box-shadow: 0 0 15px rgba(0, 150, 255, 0.5);
transform: translateY(-3px);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="content">
<h1>科技线条空间</h1>
<p>探索数字世界的无限可能<br>在虚拟与现实的边界中穿梭</p>
</div>
<script>
// 初始化画布
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小为窗口大小
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 线条类
class Line {
constructor() {
this.reset();
this.z = Math.random() * 1000;
}
reset() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = (Math.random() - 0.5) * 2;
this.vy = (Math.random() - 0.5) * 2;
this.radius = Math.random() * 1.5 + 0.5;
this.color = `rgba(0, ${Math.floor(150 + Math.random() * 105)}, 255, ${Math.random() * 0.3 + 0.1})`;
this.z = Math.random() * 1000;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.z -= 5;
// 如果线条移出屏幕或太远，重置它
if (
this.x < 0 || this.x > canvas.width ||
this.y < 0 || this.y > canvas.height ||
this.z < 0
) {
this.reset();
this.z = 1000;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
}
}
// 连接线类
class Connection {
constructor(line1, line2) {
this.line1 = line1;
this.line2 = line2;
this.distance = this.calculateDistance();
this.alpha = 0;
}
calculateDistance() {
const dx = this.line1.x - this.line2.x;
const dy = this.line1.y - this.line2.y;
return Math.sqrt(dx * dx + dy * dy);
}
update() {
this.distance = this.calculateDistance();
// 根据距离计算透明度
if (this.distance < 150) {
this.alpha = (150 - this.distance) / 150 * 0.3;
} else {
this.alpha = 0;
}
}
draw() {
if (this.alpha > 0) {
ctx.beginPath();
ctx.moveTo(this.line1.x, this.line1.y);
ctx.lineTo(this.line2.x, this.line2.y);
ctx.strokeStyle = `rgba(0, 200, 255, ${this.alpha})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
}
}
// 创建线条和连接
const lines = [];
const connections = [];
const lineCount = 100;
for (let i = 0; i < lineCount; i++) {
lines.push(new Line());
}
// 创建所有可能的连接
for (let i = 0; i < lines.length; i++) {
for (let j = i + 1; j < lines.length; j++) {
connections.push(new Connection(lines[i], lines[j]));
}
}
// 动画循环
function animate() {
// 创建半透明黑色背景（产生拖尾效果）
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新和绘制所有线条
lines.forEach(line => {
line.update();
line.draw();
});
// 更新和绘制所有连接
connections.forEach(connection => {
connection.update();
connection.draw();
});
// 添加中心脉冲效果
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// 绘制中心脉冲圆
const pulseSize = (Math.sin(Date.now() / 500) * 10 + 20);
ctx.beginPath();
ctx.arc(centerX, centerY, pulseSize, 0, Math.PI * 2);
ctx.strokeStyle = `rgba(0, 200, 255, 0.3)`;
ctx.lineWidth = 2;
ctx.stroke();
// 绘制中心点
ctx.beginPath();
ctx.arc(centerX, centerY, 3, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0, 200, 255, 0.8)';
ctx.fill();
// 从中心点到所有线条的连接
lines.forEach(line => {
const dx = centerX - line.x;
const dy = centerY - line.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 300) {
const alpha = (300 - distance) / 300 * 0.2;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(line.x, line.y);
ctx.strokeStyle = `rgba(0, 200, 255, ${alpha})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
});
requestAnimationFrame(animate);
}
// 启动动画
animate();
// 鼠标互动效果
const mouse = { x: null, y: null };
window.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
window.addEventListener('mouseout', () => {
mouse.x = null;
mouse.y = null;
});
// 添加鼠标互动线条
const mouseLine = new Line();
mouseLine.x = canvas.width / 2;
mouseLine.y = canvas.height / 2;
mouseLine.vx = 0;
mouseLine.vy = 0;
mouseLine.radius = 2;
mouseLine.color = 'rgba(255, 255, 255, 0.8)';
// 更新鼠标互动
function updateMouseInteraction() {
if (mouse.x && mouse.y) {
mouseLine.x = mouse.x;
mouseLine.y = mouse.y;
// 绘制鼠标点
mouseLine.draw();
// 绘制从鼠标点到其他线条的连接
lines.forEach(line => {
const dx = mouseLine.x - line.x;
const dy = mouseLine.y - line.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 200) {
const alpha = (200 - distance) / 200 * 0.4;
ctx.beginPath();
ctx.moveTo(mouseLine.x, mouseLine.y);
ctx.lineTo(line.x, line.y);
ctx.strokeStyle = `rgba(255, 255, 255, ${alpha})`;
ctx.lineWidth = 0.5;
ctx.stroke();
}
});
}
requestAnimationFrame(updateMouseInteraction);
}
updateMouseInteraction();
</script>
</body>
</html>
扫一扫
1269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
