WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Schermata iniziale
829
efficientapp356
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
10 July 2025
Esempio HTML della schermata di caricamento animata CSS
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) */
