Un codice di slowlogic992

1549 slowlogic992

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

25 May 2025

Un codice di qatar2023

17 December 2024

Indirizzo delle pagine di accesso

29 October 2025

Esempio di animazione del pulsante HTML CSS

HTML

CSS

JS

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;

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 = '#00ffcc';
        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(0, 255, 204, ${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;
});

Consigliato

Un codice di qatar2023

Indirizzo delle pagine di accesso

Esempio di animazione del pulsante HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS