La animación de relleno de texto al pasar el mouse es un tipo de animación de texto de los conceptos modernos de diseño web. En esta animación, el texto se rellena con un color diferente del color del texto original en una dirección particular, es decir, de izquierda a derecha, de derecha a izquierda, de arriba a abajo o de abajo a arriba.
Este tipo de animaciones no se limita solo a texto. Puede usar la misma técnica para llenar cualquier parte o forma, como llenar un vaso o una taza puede ser una buena implementación de esta animación.
Enfoque: el enfoque consiste en cubrir el texto con una capa de color diferente manteniendo su ancho en 0 al principio y aumentando el ancho al 100 % al pasar el mouse por encima.
Código HTML: en esta sección, tenemos un elemento «h1» con un atributo de texto de datos que usaremos para colocar una capa sobre nuestro texto original.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Text Fill</title> </head> <body> <h1 data-text="Geeks">Geeks</h1> </body> </html>
Código CSS: Para CSS, siga estos pasos a continuación.
- Paso 1: aplique un estilo básico como alinear el texto al centro y un color de fondo básico.
- Paso 2: establezca el contenido como el atributo que hemos utilizado en la etiqueta «h1». Esto cubrirá el texto original.
- Paso 3: establezca el ancho en 0 y establezca cualquier color diferente al color original del texto.
- Paso 4: ahora configure el «ancho» en 100 al pasar el mouse.
Nota: Puede establecer el «ancho» en cualquier otro valor para cubrir solo una parte específica del texto al pasar el mouse por encima. Por ejemplo, configúrelo al 50% para que el texto se llene solo hasta la mitad de la longitud.
<style>
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
color: #ccc;
}
h1::before {
/* This will create the layer
over original text*/
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
/* Setting different color than
that of original text */
color: green;
overflow: hidden;
/* Setting width to 0*/
width: 0%;
transition: 1s;
}
h1:hover::before {
/* Setting width to 100 on hover*/
width: 100%;
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Text Fill</title>
<style>
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
color: #ccc;
}
h1::before {
/* This will create the layer
over original text*/
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
/* Setting different color than
that of original text */
color: green;
overflow: hidden;
/* Setting width as 0*/
width: 0%;
transition: 1s;
}
h1:hover::before {
/* Setting width to 100 on hover*/
width: 100%;
}
</style>
</head>
<body>
<h1 data-text="Geeks">Geeks</h1>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA