Webleb - Code-Snippets -

2498 Vijay

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

6 June 2025

ANSCHLUSSKARTE

10 October 2025

Container für CSS-Animationsfragmente

12 September 2025

CSS-Kreis-Glühanimationseffekt

HTML

CSS

JS

const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

let particlesArray = [];

class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 5 + 1;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
            }
            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                
                if (this.size > 0.2) this.size -= 0.1;
            }
            draw() {
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

function init() {
            for (let i = 0; i < 100; i++) {
                particlesArray.push(new Particle());
            }
        }

init();
        animate();

window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            init();
        });

Empfohlen

ANSCHLUSSKARTE

Container für CSS-Animationsfragmente

CSS-Kreis-Glühanimationseffekt

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS