WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Dizayn bir algoritma
814
Metehan
Open In Editor
Publish Your Code
Recommended
24 July 2025
headset 3d loading
30 March 2025
3D Login/Register
10 July 2025
CSS Animated Button Hover Effect
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; });