Si eres un desarrollador o diseñador web seguro este artículo de hoy te vendrá muy bien, aprenderemos a crear un separador animado con CSS de la manera más fácil y con un ejemplo paso a paso donde veremos el código por partes, ¿Te animas a aprender este efecto?

Hoy aprenderemos un bonito efecto que podremos utilizar en nuestros proyectos web y que darán un efecto visual muy chulo.

Aprender a crear animaciones o efectos visuales agradables a la vista del cliente es importante en nuestro trabajo.

Muchas veces al cliente no le importa tanto el nivel de complejidad en el backend de un proyecto si en la parte visual has quedado a deber.

Si, sé que muchas veces no nos gusta la parte frontend de un proyecto pero realmente es importante para entregar un proyecto de calidad.

Este separador animado con CSS seguramente te dará un punto a tu favor en la revisión de tu proyecto.

Lo que vamos a aprender hoy será algo similar a este separador:

¿Realmente bonito no es verdad?

Hacer esto es muy sencillo y únicamente requiere de dos pasos:

Primero necesitamos agregar una etiqueta <hr> clásica de separador.

<hr class="separador-animado"></hr>

Agregamos una clase para poder establecer el estilo deseado.

Después vamos a nuestro CSS y agregamos lo siguiente:

.separador-animado {
  width:100%;
  background: rgba(1, 15, 30, 0.1);
  height: 1px;
  overflow: hidden;
  position: relative;
}

.separador-animado::before {
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-name: separador-animado-animacion;
  background: #111;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  width: 80px;
}

En este código podemos ver que hacemos referencia a una animación:

animation-name: separador-animado-animacion;

Te muestro cómo cambiar el color de selección con CSS.

Esta animación es la clave de nuestro efecto de separador animado con CSS y se crea con el siguiente código:

@keyframes separador-animado-animacion {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(1440px);
  }
}

Y listo, ahora podemos disfrutar de separadores realmente chulos en nuestros proyectos web.

Si este artículo sobre cómo crear un separador animado con CSS te fue de utilidad no olvides compartirlo en tus redes sociales y dejar un comentario abajo si tienes cualquier duda o comentario relacionada al tema de hoy, será un placer ayudarte.

¡Hasta luego!

Clic para valorar esta información

[Total: 4 Promedio: 5]

Separador animado con CSS

jonathan__melgoza