WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<body> <div class="animation-container"> <div class="bureaucracy"></div> <div class="figure"></div> <div class="figure"></div> <div class="figure"></div> </div> </body>
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #24303F; 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: 25%; min-width: 100%; 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; } .bureaucracy { position: absolute; width: 200px; height: 200px; background-color: #34495E; border-radius: 10px; transform-origin: center; animation: bureaucracy 10s linear infinite; } .figure { position: absolute; width: 20px; height: 20px; background-color: #66D9EF; border-radius: 50%; filter: blur(5px) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); animation: figureLoop 8s linear infinite; } @keyframes bureaucracy { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes figureLoop { 0% { transform: translate(0,0); } 50% { transform: translate(50px, 0); } 100% { transform: translate(0,0); } /* loop back */ } /* Animação que se repete em cada iteração da loop do 'figureLoop */ .figure:nth-child(1) { animation-delay: 0s; } .figure:nth-child(2) { animation-delay: 2s; } .figure:nth-child(3) { animation-delay: 4s; }
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);
Validating your code, please wait...
HTML
CSS
JS
<body> <div class="animation-container"> <div class="bureaucracy"></div> <div class="figure"></div> <div class="figure"></div> <div class="figure"></div> </div> </body>
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #24303F; 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: 25%; min-width: 100%; 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; } .bureaucracy { position: absolute; width: 200px; height: 200px; background-color: #34495E; border-radius: 10px; transform-origin: center; animation: bureaucracy 10s linear infinite; } .figure { position: absolute; width: 20px; height: 20px; background-color: #66D9EF; border-radius: 50%; filter: blur(5px) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); animation: figureLoop 8s linear infinite; } @keyframes bureaucracy { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes figureLoop { 0% { transform: translate(0,0); } 50% { transform: translate(50px, 0); } 100% { transform: translate(0,0); } /* loop back */ } /* Animação que se repete em cada iteração da loop do 'figureLoop */ .figure:nth-child(1) { animation-delay: 0s; } .figure:nth-child(2) { animation-delay: 2s; } .figure:nth-child(3) { animation-delay: 4s; }
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);