WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Concevoir un algorithme
1225
Metehan
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
30 August 2024
Effet de survol de carte 3D
28 August 2025
Archinova : Atelier d'architecture et de design | Turquie
22 August 2025
Marché informatique : achetez des ordinateurs portables, des ordinateurs de bureau et plus encore
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; });