La animación de texto de relleno líquido se puede hacer usando CSS | ::antes del selector . Usaremos fotogramas clave para establecer la altura de cada fotograma de la animación. Por favor, asegúrese de conocer tanto CSS | ::antes del selector y CSS | Regla @keyframes antes de probar este código.
El estilo básico del texto se puede hacer de manera diferente que depende totalmente de cómo quieras que se vea tu texto. Lo principal es con fotogramas clave. Para los porcentajes de la primera mitad, aumentamos la altura y para la siguiente mitad, disminuimos la altura. Hemos utilizado el 25% como valor mínimo para la altura. Puede jugar con los valores de un porcentaje para cambiar la altura mínima y máxima y la apariencia de la animación según sus necesidades.
Creación de estructura: en esta sección, crearemos el texto donde aplicaremos el efecto de relleno líquido. Para crear la estructura se requerirá HTML normal.
- Código HTML:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <center> <h1>GeeksforGeeks</h1> </center> </body> </html>
Estructura de diseño: antes de comenzar el diseño, debe estar familiarizado con algunos conceptos de CSS como CSS | ::antes del selector y CSS | Regla @keyframes . Otros efectos dependen totalmente del diseñador.
- Código CSS:
CSS
<style>
body {
margin: 0;
padding: 0;
}
h1 {
margin: 200px 0;
padding: 0;
font-size: 80px;
position: relative;
color:green;
}
h1:before {
content: "GeeksforGeeks";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:white;
overflow: hidden;
animation: animate 6s infinite;
}
@keyframes animate {
0% {
height: 25%;
}
25% {
height: 50%;
}
50% {
height: 65%;
}
75% {
height: 40%;
}
100% {
height: 25%;
}
}
</style>
Solución final: en esta sección, combinaremos las dos secciones anteriores en una sección y lograremos el efecto de relleno líquido en el texto.
- Programa:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to Create Liquid Filling Effect
on Text using HTML and CSS ?
</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
margin: 200px 0;
padding: 0;
font-size: 80px;
position: relative;
color:green;
}
h1:before {
content: "GeeksforGeeks";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:white;
overflow: hidden;
animation: animate 6s infinite;
}
@keyframes animate {
0% {
height: 25%;
}
25% {
height: 50%;
}
50% {
height: 65%;
}
75% {
height: 40%;
}
100% {
height: 25%;
}
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
</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