Pixel Animation
Home
Snippets
Pixel Animation
HTML
CSS
JS
<body></body>
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; overflow: hidden; background-color: #000; display: flex; align-items: center; justify-content: center; } .pixel { position: absolute; width: 12px; height: 12px; background-color: #00ff00; opacity: 0.8; animation: fall 5s linear infinite; } @keyframes fall { 0% { transform: translateY(-100vh); } 100% { transform: translateY(100vh); } }
const createPixel = () => { const pixel = document.createElement('div'); pixel.classList.add('pixel'); pixel.style.left = `${Math.random() * 100}vw`; pixel.style.backgroundColor = getRandomColor(); pixel.style.animationDuration = `${Math.random() * 3 + 3}s`; document.body.appendChild(pixel); setTimeout(() => pixel.remove(), 5000); }; const getRandomColor = () => { const colors = ['#ff5733', '#33c9ff', '#00ff00', '#ff33f6', '#faff33']; return colors[Math.floor(Math.random() * colors.length)]; }; setInterval(createPixel, 100);
Ad #1
Ad #2
Scroll to Top