Inicio Apuntes FPApuntes DAW Crear animaciones de fundido entrada/salida de texto degradado

Crear animaciones de fundido entrada/salida de texto degradado

Publicado por entreunosyceros
Publicado el: Última actualización:

Una vez más aquí. Hoy vengo a dejar un artículo rápido por que un usuari@ me ha pedido ayuda para crear animaciones de fundido entrada/salida de texto. El caso es que hace ya algunos años, hice algo así para un proyecto que realicé mientras estudiaba. Esto en su día lo hice utilizando algunas reglas de CSS con un poco de HTML, y es lo que vamos a ver a continuación.

El caso es que el usuario que se puso en contacto conmigo por el formulario de contacto de esta web, me pidió ayuda para crear una animación elegante de entrada/salida de texto degradado, como las que se pueden ver en la página de Apple iPhone 14 Pro. Evidentemente que nadie se espere una animación tal cual a la que aparece en esta página, pero si se parece bastante a la animación que aparece en algunos de los texto.

Crear animaciones de fundido entrada/salida de texto degradado

degradado textos

Como decía, para crear este ejemplo, solo es necesario crear un archivo llamado index.html y dentro vamos a pegar el siguiente código HTML con sus correspondientes reglas CSS, para animar la aparición del texto.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Degradado</title>
    <style type="text/css">
      body {
        background-color: black;
      }
      .texto p {
        position: relative;
        width: 60vw;
        font-size: 50px;
        color: transparent;
        line-height: 2;
        padding: 20px;
        margin: auto;
        background: linear-gradient(
          transparent,
          transparent 25%,
          #b3a7fa,
          #4c00ff,
          transparent 75%,
          transparent
        );
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 100% 500%;
        background-position: center 0;
        -webkit-animation: textScroll 5s infinite linear alternate;
        animation: textScroll 5s infinite linear alternate;
      }
      @-webkit-keyframes textScroll {
        100% {
          background-position: center 100%;
        }
      }
      @keyframes textScroll {
        100% {
          background-position: center 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="texto">
      <p>
        Un ejemplo creado en entreunosyceros.net. Este ejemplo es un degradado
        creado con CSS3 que funciona sobre texto. En este ejemplo se puede ver un texto
        que va cambiando de color y desapareciendo mediante un fundido a negro.
        <br />
      </p>
    </div>
  </body>
</html>

Como se puede ver el código no está comentado, pero tampoco tiene mucha complicación para cualquiera que sepa un poco de CSS y HTML. El resultado final, si ejecutamos el archivo en el que acabamos de guardar el código anterior, deberíamos ver algo como lo que se puede ver en la demostración del código.

Espero que esto pueda serle de ayuda al usuari@ que me preguntaba cómo hacer algo como esto. Como dije más arriba, no es exactamente igual a lo que me pedía, pero puede ser un comienzo.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.