WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Projetar um algoritmo
1226
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
23 August 2025
Modelo de página de login HTML CSS do SEAT Leon
27 May 2025
Página de contato futurista
1 August 2025
Protocolo de paralisia de rolagem
HTML
Copy
Yeşil Ağ Animasyonu
CSS
Copy
body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background-color: #0a1a0a; /* Koyu yeşil tona çevrildi */ } #network-canvas { position: fixed; top: 0; left: 0; }
JS
Copy
const canvas = document.getElementById('network-canvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const nodes = []; const maxNodes = 100; const maxDistance = 100; // Yeşil tonlar için renk ayarları const nodeColor = '#00ff4c'; // Daha parlak yeşil const lineColorBase = '0, 255, 76'; // RGB yeşil ton class Node { constructor(x, y) { this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 2; this.vy = (Math.random() - 0.5) * 2; } update() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) this.vx *= -1; if (this.y < 0 || this.y > canvas.height) this.vy *= -1; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, 2, 0, Math.PI * 2); ctx.fillStyle = nodeColor; ctx.fill(); } } for (let i = 0; i < maxNodes; i++) { nodes.push(new Node(Math.random() * canvas.width, Math.random() * canvas.height)); } function drawConnections() { for (let i = 0; i < nodes.length; i++) { for (let j = i + 1; j < nodes.length; j++) { const dx = nodes[i].x - nodes[j].x; const dy = nodes[i].y - nodes[j].y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < maxDistance) { ctx.beginPath(); ctx.moveTo(nodes[i].x, nodes[i].y); ctx.lineTo(nodes[j].x, nodes[j].y); ctx.strokeStyle = `rgba(${lineColorBase}, ${1 - distance / maxDistance})`; ctx.stroke(); } } } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (const node of nodes) { node.update(); node.draw(); } drawConnections(); requestAnimationFrame(animate); } animate(); window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; });