WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<body> <div class="animation-container"> <div class="codeblock"> <h1>FAKE IT TILL YOU MAKE IT</h1> </div> </div> </body>
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #16181A; 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; } .codeblock { animation-name: fri_kernel_codePulse; animation-duration: 4s; animation-delay: 0.5s; animation-timing-function: cubic-bezier(.19, 1, 1, .56); animation-iteration-count: infinite; mix-blend-mode: difference; /* --> Cria um efeito de distorção e desfoca o código, como se fosse uma ilusão */ } .opacity-layer { opacity: 0; animation-timing-function: ease-out; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 1s; } @keyframes fri_kernel_codePulse { 0% { transform: rotate(0deg); } 10% { transform: rotate(2deg); opacity: 0.9; } 20% { transform: rotate(-2deg); opacity: 0.8; } 30% { transform: rotate(0deg); opacity: 0.7; } 100% { transform: rotate(0deg); opacity: 0.9; } } @keyframes fri_kernel_promptSlide { 0% { transform: translateX(-100%); opacity: 0; } 50% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; 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="codeblock"> <h1>FAKE IT TILL YOU MAKE IT</h1> </div> </div> </body>
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #16181A; 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; } .codeblock { animation-name: fri_kernel_codePulse; animation-duration: 4s; animation-delay: 0.5s; animation-timing-function: cubic-bezier(.19, 1, 1, .56); animation-iteration-count: infinite; mix-blend-mode: difference; /* --> Cria um efeito de distorção e desfoca o código, como se fosse uma ilusão */ } .opacity-layer { opacity: 0; animation-timing-function: ease-out; animation-duration: 1s; animation-fill-mode: forwards; animation-delay: 1s; } @keyframes fri_kernel_codePulse { 0% { transform: rotate(0deg); } 10% { transform: rotate(2deg); opacity: 0.9; } 20% { transform: rotate(-2deg); opacity: 0.8; } 30% { transform: rotate(0deg); opacity: 0.7; } 100% { transform: rotate(0deg); opacity: 0.9; } } @keyframes fri_kernel_promptSlide { 0% { transform: translateX(-100%); opacity: 0; } 50% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; 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);