WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemplo de animação de formas CSS
411
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
23 August 2025
Formulário de login e registro HTML (turco)
4 August 2025
Déjà vu digital
29 December 2024
ki ok, dia de Nova Jersey
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1C1E23; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 18px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; max-width: 90%; width: 100%; overflow-y: auto; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background: transparent; } .container { position: relative; width: 200px; height: 200px; } .shape { position: absolute; width: 50px; height: 50px; background-color: #FFC000; border-radius: 50%; opacity: 1; animation: shapeAnimation 5s infinite alternate linear; } .shape::before { content: ''; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); border-radius: 50%; transform: translate(-50%, -50%); animation: outlineAnimation 5s infinite alternate linear; } @keyframes shapeAnimation { 0% { transform: scale(1) } 50% { transform: scale(1.1) animation-delay: 1s; } 100% { transform: scale(0.8) } } @keyframes outlineAnimation { 0% { transform : rotate(0deg); opacity: 0; } 50% { transform : rotate(-45deg); opacity: 1; } 100% { transform : rotate(45deg); opacity: 0; } }
JS
Copy
const canvas = document.getElementById('matrixCanvas'); const ctx = canvas.getContext('2d'); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas); const matrixChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()'; const fontSize = 16; const columns = canvas.width / fontSize; const drops = Array.from({ length: columns }).fill(1); function draw() { ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0f0'; ctx.font = `${fontSize}px monospace`; drops.forEach((y, i) => { const text = matrixChars[Math.floor(Math.random() * matrixChars.length)]; const x = i * fontSize; ctx.fillText(text, x, y * fontSize); if (y * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; }); } setInterval(draw, 50);