Texto degradado animado CSS

Texto degradado animado CSS — Amit Merchant — Un blog sobre PHP, JavaScript y más

 

Es posible que desee llamar la atención de sus usuarios sobre ciertos elementos de su sitio web. Por ejemplo, el título de la publicación de su blog, un anuncio importante o el botón de llamada a la acción.

Y una de las formas de hacerlo es usar fuentes degradadas. Pero es incluso mejor si puedes animar el efecto degradado en la fuente. Alguna cosa como esta.

Resulta que no es tan difícil lograr este efecto. Considere el siguiente marcado HTML.

<div> 
    <p>Memento Mori</p>
</div>

Usaremos el siguiente CSS para animar el efecto degradado en el texto.

p {
    background: linear-gradient(
        to right,
        #7953cd 20%,
        #00affa 30%,
        #0190cd 70%,
        #764ada 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}

Además del CSS anterior, también necesitaremos agregar la siguiente animación de fotogramas clave.

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

Lo que sucede aquí es que estamos animando el background-position propiedad de la p elemento de 0% para 100% en un periodo de tiempo 5s con un ease-in-out función de temporizador Y hacemos esta animación hasta el infinito.

Ajuste de la background-size propiedad en 500% auto garantiza que el efecto degradado se aplique a todo el texto. Y el background-clip la propiedad se establece en text para garantizar que el efecto de degradado solo se aplique al texto y no al fondo.

EL --webkit-text-fill-color Y text-fill-color las propiedades se establecen en transparent para asegurarse de que el texto no sea visible. Y el background La propiedad se establece en el efecto de degradado que se utilizará como base para la animación.

Y eso es todo. Puede cambiar la duración de la animación, la función de sincronización y el efecto de degradado como desee.

Creé un CodePen para que juegues con el código anterior.

Si quieres conocer otros artículos parecidos a Texto degradado animado CSS puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas