WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Tela inicial
862
efficientapp356
Abrir no Editor
Publique Seu Código
Recomendado
10 July 2025
Exemplo de tela de carregamento animada em HTML com CSS
24 February 2025
Botão de pressão inicial do CodePen
21 July 2025
Tela de TV HTML com incorporação e efeitos do YouTube
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="stylesplashscreen.css"> <title>DJYMNHS SHS Computer Laboratory</title> </head> <body> <div id='splash' > <h2 contenteditable="true">CCAJYV</h2> <link rel="stylesheet" href="buttonsplashscreen.css"> <a href="Homepage.html"> <button class="btn">Go to Homepage</button> </a> </div> <style> #splash { position:absolute; top: 0; left: 0; background:#265d97 !important; height: 100vh; width: 100%; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 1; transition: opacity 1s; } #splash img { width: 300px; } #splash.fade { opacity: 0; } </style> </body> </html> <!-- Replace with your HTML Code (Leave empty if not needed) -->
CSS
Copy
*{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: arial; } h2{ position: relative; font-size: 6em; letter-spacing: 15px; color: #4991d4; text-transform: uppercase; width: 100%; text-align: center; -webkit-box-reflect : below 1px linear-gradient(transparent , #0004); line-height: 0.70em; outline: none; animation: animate 2s linear infinite; } @keyframes animate{ 0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92%{ color: #3486d3; text-shadow: none; } 18.1%,20.1%,30%,50%,60.1%,65%,80.1%,90%,92.1%,100%{ color: #094b89; text-shadow: 0 0 10px #61dcf5, 0 0 20px #61dcf5, 0 0 40px #61dcf5, 0 0 80px #03bcf4, 0 0 160px #03bcf4; } } <!-- Replace with your HTML Code (Leave empty if not needed) -->
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
