WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Exemples de menus déroulants CSS animés
726
byby.createsite
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
15 August 2024
Jeu de devinettes
30 November 2024
Site Web de voyage avec bordure-rayon inversé
27 November 2024
Produits de cartes
HTML
Copy
Feeling Inadequate
Didn't meet expectations again
Perceived as less competent
Second-guessing every decision
Not good enough
Always strive for more
Should Have Known Better
Missed a crucial detail
Allowed a preventable error to happen
Struggled to learn from past mistakes
Beginner's mind, forever?
Never quite feeling prepared
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #333333; 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%; 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%); width: 100%; height: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background: transparent; animation: friday_ui-loop 5s infinite linear; } @keyframes friday_ui-loop { 0% { opacity: 0; } 100% { opacity: 1; } }
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);