WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Frammento HTML di animazione della finestra CSS
409
ByBy.inc
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
27 November 2024
Pagina di destinazione - Negozio
25 March 2025
Cronologia della ruota - CSS puro
23 March 2025
Un codice di constantcc607
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #141824; 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; } /* Thursday: Tab Overload Animation */ .window { position: absolute; width: 100px; /* Ajustar o tamanho de acordo com o design */ height: 80px; /* Ajustar o tamanho de acordo com o design */ border-radius: 8px; margin: 20px; /* Ajustar a distância entre as janelas */ background: rgba(255, 255, 255, 0.05); pointer-events: none; /* Evitar interação com o usuário */ animation: tabFlicker 1s linear infinite; } .content { position: absolute; top: 10px; left: 10px; color: #F8F8F2; font-size: 12px; text-overflow: ellipsis; /* Cortar texto que excede o espaço */ overflow: hidden; /* Ocultar texto que excede o espaço */ } /* Animação de piscamento para as janelas */ @keyframes tabFlicker { 0% { opacity: 0.9; } 50% { opacity: 0.7; } 100% { opacity: 0.9; } } .tab-single { animation-delay: 0.0s; /* Animação independente*/ }
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);