Breaking

Post Top Ad

Your Ad Spot

viernes, 30 de agosto de 2019

Animación de texto de relleno de agua CSS con ondas | Water Wave Text Mask

¿Cómo podemos crear un efecto de relleno de agua en un texto usando CSS? Solución: Animación de texto de relleno de agua CSS con ondas, máscara de onda de agua en el texto.
Anteriormente, he compartido Direction Fill Effect On Hover , ahora es el momento de llenar el tipo de agua. Esto diseña algo así como una máscara de texto con GIF , pero es con una imagen PNG estática. La combinación de efectos de agua y olas crea una animación genial , y puedes usarla en muchos lugares.
Hoy aprenderás a crear una máscara de texto de Water Wave usando HTML y CSS3 . Hay una animación de ondas de agua en movimientodentro del texto con repetición infinita. También puede usar esto como una animación de la pantalla de carga , también se verá bien en ese lugar. Este diseño es personalizable, puede cambiar de color, animación, texto, etc.
Entonces, hoy estoy compartiendo animación de texto de relleno de agua CSS con ondas . He creado esto usando HTML y CSS puro , esto es sin JavaScript y ninguna biblioteca. Creo que esto solo funcionará en los navegadores más recientes o en las versiones más nuevas para Chrome, Edge, Mozilla, etc. Debido a que los navegadores obsoletos no admiten muchas propiedades CSS3 .
Si está pensando ahora cómo es realmente esta animación de ondas de agua , vea la vista previa que se muestra a continuación.

Vista previa de la máscara de texto de Water Wave

Vea esta vista previa de video para tener una idea de cómo se ve esta animación .
Reproductor de video
00:06
00:16
Vista en vivo
Ahora puede ver esto visualmente, también puede verlo en vivo presionando el botón anterior. Si te gusta esto, obtén el código fuente de su.

Animación de texto de relleno de agua CSS con código fuente de ondas

Antes de compartir el código fuente , hablemos de ello. Como puede ver en la vista previa, hay dos tipos de animación de texto . Solo hay una diferencia en el color de la imagen que he usado. Primero creé un div HTML y puse texto dentro de él, di dos clases CSS nombradas en el div. El primer nombre se está cargando y el segundo es wave . Ahora se ve así: <div class "loading wave" >  .
Ahora usando CSS he colocado el texto en el lugar correcto. Hay dos clases en nuestro div, utilizando la primera clase de "carga", coloqué el texto y di el tamaño de fuente, familia de fuentes, altura, ancho, posición, etc. Usando la " onda " de segunda clase, creé la animación y enmascaramiento. Utilicé el método de máscara de recorte con texto y puse la imagen PNG en segundo plano.
Para crear la máscara, he usado CSS background clip text comando ( información ), y poner el color transparente. Después de eso, he creado dos animaciones usando CSS keyframe . Una animación para crear olas y otra para subir y bajar, he colocado estas dos animaciones con infinito y lineal.
Dejó todas las demás cosas que comprenderá después de obtener los códigos, no puedo explicar todo por escrito. Para crear esta animación, debe crear solo 2 archivos, uno para HTML y otro para CSS . Siga los pasos para crear esto sin ningún error.
index.html
Cree un archivo HTML llamado ' index.html ' y coloque estos códigos aquí debajo.
style.css
Ahora cree un archivo CSS llamado ' style.css ' y coloque estos códigos aquí.
Eso es. Ahora ha creado con éxito la animación de texto CSS Water Filling With Waves , Water Wave Text Mask . Si tiene alguna duda o pregunta, comente a continuación.
Gracias por visitar, siga visitando.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas