Bienvenida EL TEMPLO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Bienvenida al Templo</title>
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to top, #000000, #1a1a1a);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-family: 'Georgia', serif;
color: white;
}
.nubes {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background: url('https://i.imgur.com/VyzfIUm.png') repeat-x;
animation: moverNubes 60s linear infinite;
opacity: 0.5;
z-index: 1;
}
@keyframes moverNubes {
0% { background-position: 0 0; }
100% { background-position: 1000px 0; }
}
.abeja {
width: 120px;
height: 120px;
background: url('https://i.imgur.com/2CK4gO7.png') no-repeat center center / contain;
animation: girar 4s linear infinite;
z-index: 2;
}
@keyframes girar {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.mensaje {
position: absolute;
bottom: 10%;
z-index: 3;
text-align: center;
font-size: 22px;
letter-spacing: 2px;
text-shadow: 0 0 8px #ffffff;
}
.estrella {
position: absolute;
top: 10%;
width: 20px;
height: 20px;
background: radial-gradient(white, transparent);
animation: parpadear 2s infinite alternate;
z-index: 3;
}
@keyframes parpadear {
from { opacity: 0.1; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="nubes"></div>
<div class="abeja"></div>
<div class="estrella" style="left: 20%;"></div>
<div class="estrella" style="left: 50%;"></div>
<div class="estrella" style="left: 75%;"></div>
<div class="mensaje">
<p>Estás entrando al Templo.<br>Un espacio entre dimensiones.</p>
</div>
</body>
</html>
Comentarios
Publicar un comentario