Casi todos los sitios web que visitamos hoy utilizan algún tipo de animación de texto para interactuar con sus usuarios. En general, todo tipo de animaciones de texto se realizan con JavaScript simple o estándar o con algunas bibliotecas de JavaScript de terceros. Pero hay algunas animaciones que se pueden hacer usando solo CSS. Uno de ellos es cambiar la animación de texto de palabra. En este tipo de animación, se selecciona una palabra para cambiar después de un cierto intervalo de tiempo. Esta es una animación un poco más antigua y es una de las primeras animaciones de texto que se utilizaron hace una década.
Enfoque: el enfoque consiste en utilizar fotogramas clave para cambiar la palabra en un determinado fotograma. La palabra se puede establecer mediante la propiedad de contenido.
Código HTML: en esta sección, tenemos un encabezado envuelto dentro de una etiqueta <h1>. También tenemos un lapso que se completará más tarde usando CSS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Text Animation</title> </head> <body> <h1>I love <span> </span></h1> </body> </html>
Código CSS:
- Paso 1: haga un estilo básico como color de fondo, color de texto, márgenes, relleno, etc.
- Paso 2: Ahora, use antes de seleccionar/o para establecer el contenido del intervalo en una palabra inicial.
- Paso 3: use la propiedad de animación para establecer el tiempo total de la animación.
- Paso 4: ahora, use fotogramas clave para cambiar la propiedad de contenido que se configuró antes del selector para cada fotograma.
Consejo: puede configurar el tiempo total según sus necesidades. Pero, en general, se recomienda utilizar un tiempo que sea un múltiplo del número total de palabras que desea cambiar. Como en nuestro caso, tenemos tres palabras y hemos usado 3s como tiempo total. Puedes usar 6, 9, 12… así sucesivamente. Establecer el tiempo como múltiplo del número total de palabras garantizará que cada palabra se muestre durante la misma cantidad de tiempo.
<style>
body {
background: green;
}
h1 {
display: flex;
justify-content: center;
color: white;
}
span::before {
content: "Geeks";
animation: animate infinite 3s;
padding-left: 10px;
}
@keyframes animate {
0% {
content: "Geeks";
}
50% {
content: "for";
}
75% {
content: "Geeks";
}
}
</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 Animation</title>
<style>
body {
background: green;
}
h1 {
display: flex;
justify-content: center;
color: white;
}
span::before {
content: "Geeks";
animation: animate infinite 3s;
padding-left: 10px;
}
@keyframes animate {
0% {
content: "Geeks";
}
50% {
content: "for";
}
75% {
content: "Geeks";
}
}
</style>
</head>
<body>
<h1>I love <span> </span></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