WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animated CSS Dropdown Menu Examples
723
byby.createsite
Open In Editor
Publish Your Code
Recommended
30 August 2024
Animated heart
7 October 2025
CSS Loading Animation Snippet
22 August 2025
3D Lion Card Carousel HTML CSS & JavaScript
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);