WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Extrait HTML d'animation de fenêtre CSS
411
ByBy.inc
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
14 September 2024
Carrousel de portefeuille avec curseurs synchronisés
23 August 2025
Nova Gym : Centre de fitness, de bien-être et de sport
28 August 2024
Héros de l'éclipse
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);