WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sliding Text</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="slide-in"> <h1>Welcome to the Store</h1> </div> </div> </body> </html>
body { background-color: #000; color: white; font-family: 'Arial', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; text-align: center; } .slide-in { position: relative; animation: slide 2s ease-out forwards; } @keyframes slide { 0% { left: -100%; } 100% { left: 0; } } .container { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } h1 { font-size: 50px; letter-spacing: 2px; transition: transform 0.3s ease; } h1:hover { transform: scale(1.1); }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sliding Text</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="slide-in"> <h1>Welcome to the Store</h1> </div> </div> </body> </html>
body { background-color: #000; color: white; font-family: 'Arial', sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; text-align: center; } .slide-in { position: relative; animation: slide 2s ease-out forwards; } @keyframes slide { 0% { left: -100%; } 100% { left: 0; } } .container { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); } h1 { font-size: 50px; letter-spacing: 2px; transition: transform 0.3s ease; } h1:hover { transform: scale(1.1); }
/* Replace with your JS Code (Leave empty if not needed) */