El día de hoy vamos a aprender a crear esta animación del género Synthwave
Temario
- Creación del cuerpo (HTML)
- Agregar estilos 😎
- Enlace al repositorio 🚀
Empecemos creando el cuerpo de nuestra vista (HTML)
index.html:
<body class="synthwave-background">
</body>
Nunca, pero nunca apliques estilos sobre la etiqueta body del documento si planeas usar estos estilos en producción o en proyectos más grandes ! 🚫
Nuestra página necesita un texto a mostrar, ¡manos a la obra!
<body class="synthwave-background">
<div class="_80s-text">
<h1>Synthwave</h1>
</div>
</body>
Agregar el sol con las líneas características del synthwave fue algo complicado, especialmente si eres nuevo en css, la primera opción sería utilizar una imagen, pero no se veía tan bien como se esperaba, sin embargo, se pueden crear con puros elementos HTML! 😳
<body class="synthwave-background">
<div class="_80s-text">
<h1>Synthwave</h1>
</div>
<div class="sun">
<div class="lines">
<div class="line" style="--pos:1;"></div>
<div class="line" style="--pos:2;"></div>
<div class="line" style="--pos:3;"></div>
<div class="line" style="--pos:4;"></div>
<div class="line" style="--pos:5;"></div>
<div class="line" style="--pos:6;"></div>
<div class="line" style="--pos:7;"></div>
</div>
</div>
</body>
Aquí dibujamos línea por línea, y la estilizamos con CSS, además, le indicamos la variable --pos:N para realizar un cálculo que más adelante veremos.
Finalmente, nos queda representar el suelo que se animará, de la misma manera, crear este elemento es un poco complicado, y aunque una imagen parezca la mejor solución, encontramos una forma más eficiente y continuamos con #PURECSS.
<body class="synthwave-background">
<div class="_80s-text">
<h1>Synthwave</h1>
</div>
<div class="sun">
<div class="lines">
<div class="line" style="--pos:1;"></div>
<div class="line" style="--pos:2;"></div>
<div class="line" style="--pos:3;"></div>
<div class="line" style="--pos:4;"></div>
<div class="line" style="--pos:5;"></div>
<div class="line" style="--pos:6;"></div>
<div class="line" style="--pos:7;"></div>
</div>
</div>
<div class="road"></div><!-- Sí, eso es todo 😳 -->
</body>
¡Vamos a estilizar!
app.css:
* {
box-sizing: border-box;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Helvetica Neue", Arial, sans-serif;
}
Empecemos especificando unas reglas para una mejor visualización.
A continuación, agregaremos una fuente para que se vea mucho más S Y N T H W A V E
@font-face {
src: url("./assets/Neon.ttf");
font-family: "Neon";
}
Esa fuente la encontrarás en el repositorio 😉
Ahora sí, vamos a crear el fondo:
.synthwave-background {
width: 100%;
height: 100vh;
overflow: hidden;
background: linear-gradient(
to bottom,
rgb(20, 39, 79) 0px,
rgb(242, 21, 119) 500px,
rgb(20, 39, 79) 500px
);
}
Eso dejará un degradado de fondo, continuamos con la creación del suelo:
.road {
width: 100%;
height: 40em;
overflow: hidden;
}
Lo anterior solo especifica su tamaño, con las siguientes reglas crearemos las líneas del suelo
/*.road*/
...
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0px,
rgba(62, 250, 240, 0.5) 0%,
rgba(62, 250, 240, 0.5) 3px,
rgba(0, 0, 0, 0) 0px
),
linear-gradient(
90deg,
rgba(0, 0, 0, 0) 0px,
rgba(62, 250, 240, 0.5) 0%,
rgba(62, 250, 240, 0.5) 3px,
rgba(0, 0, 0, 0) 0px
);
Eso creará una malla con cubos trazados como gradientes, genial no?
Para terminar con el suelo, agregamos las siguientes reglas:
/*.road*/
...
background-size: 2em 1em, 2em 1em;
background-color: rgb(20, 39, 79);
perspective: 1000px;
margin-top: 20em;
transform: perspective(200px) rotateX(45deg) scale(2);
animation: road 10s linear infinite;
Le especificamos el tamaño del fondo, la perspectiva inclinada con su respectiva transformación y por último, una animación que le dará vida a nuestra página.
Vamos a continuar creando el sol
.sun {
width: 400px;
height: 400px;
background: linear-gradient(180deg, #faf09d 0%, #fc9093 52.08%, #e92077 100%);
border-radius: 50%;
z-index: 1;
margin: 0 auto;
position: absolute;
top: 100px;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
Ahí crearemos un div circular con el degradado del sol.
Continuamos estilizando el div que contendrá las líneas:
.sun > .lines {
width: 100%;
height: 50%;
position: relative;
bottom: -60%;
border-radius: 0 0 50% 50%;
overflow: hidden;
}
Esas reglas nos bastarán para situar las líneas al fondo del sol.
Por último, vamos a estilizar cada línea del sol, como sabrás, cada línea tiene un tamaño mayor a la línea anterior, esto lo logramos con este bloque:
.lines > .line {
width: 100%;
height: calc(5px * var(--pos));
background-color: rgba(0, 0, 0, 0.3);
mix-blend-mode: overlay;
margin-bottom: 1rem;
}
La variable --pos nos servirá para aumentar el tamaño del div siguiente.
Vamos a animar nuestro suelo:
@keyframes road {
from {
transform: perspective(200px) rotateX(45deg) scale(1.5);
}
to {
transform: perspective(200px) rotateX(45deg) scale(2.1);
}
}
Por último, estilizaremos los textos en nuestro sitio:
._80s-text {
font-size: 6em;
width: 100%;
height: 100vh;
position: absolute;
z-index: 4;
}
._80s-text > h1 {
font-family: "Neon", Arial, Helvetica, sans-serif;
width: 100%;
text-align: center;
color: rgb(252, 121, 218);
text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px rgb(234, 38, 171),
0 0 10px rgb(234, 38, 171), 0 0 15px rgb(234, 38, 171),
0 0 20px rgb(234, 38, 171), 0 0 25px rgb(234, 38, 171);
}
Resultado
Enlace al repositorio
Podrás descargar y probar este efecto en tu equipo aquí.
¡Si te gustó síguenos en nuestra redes sociales y aquí para más contenido!
Top comments (0)