La animación Seesaw es una animación que se puede aplicar a varios componentes de un sitio web como texto, tarjetas e incluso botones. Pero, se usa principalmente para animación de texto. Esta es una animación relativamente nueva cuando se trata de animaciones de texto.
Enfoque: El enfoque es simple, rotaremos el texto en un orden fijo de ángulos. Para este artículo, usaremos la secuencia 5, 0, -5 para los ángulos.
Código HTML: en esta sección, tenemos el texto envuelto dentro de la etiqueta <h1>.
HTML
<!DOCTYPE html> <html> <head> <title>SeeSaw Text Animation</title> </head> <body> <h1>GeeksforGeeks</h1> </body> </html>
Código CSS:
- Paso 1: aplique un fondo al elemento del cuerpo.
- Paso 2: alinee el texto con el «centro» y aplique un estilo básico como usar «tamaño de fuente».
- Paso 3: use la propiedad de animación con el identificador llamado animate.
- Paso 4: Usa fotogramas clave para animar el texto. Usa la misma secuencia para los ángulos que se discutió en el enfoque.
Nota: No aumente el ángulo más de 10. Puede agregar algo de «sombra de texto» para darle a esta animación una apariencia tridimensional.
<style>
body {
background: green;
}
h1 {
text-align: center;
margin-top: 150px;
font-size: 40px;
color: white;
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(-5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(5deg);
}
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>SeeSaw Text Animation</title>
<style>
body {
background: green;
}
h1 {
text-align: center;
margin-top: 150px;
font-size: 40px;
color: white;
animation: animate 5s linear infinite;
}
@keyframes animate {
0% {
transform: rotate(5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(-5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(5deg);
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</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