El efecto de banda elástica es bastante popular y se ve atractivo cuando una string de texto se vuelve estirable, obviamente eso se verá genial. La animación de texto de la banda elástica se puede generar fácilmente usando animaciones CSS, usaremos la regla @keyframes para obtener el resultado deseado. Entonces, dividiremos el artículo en dos secciones, en la primera sección crearemos la string de texto que será elástica cuando el usuario pase el cursor sobre la string de texto. Ese efecto lo añadiremos en el segundo apartado.
Creación de estructura: en esta sección solo usaremos HTML para crear la string de texto.
- Código HTML: En esta sección crearemos un texto básico usando la etiqueta h1 .
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8" /> <title>Rubber Band Text Animation</title> </head> <body> <div id="text"> <h1>GeeksforGeeks</h1> <b>Hover over on the text</b> </div> </body> </html>
Estructura de diseño: en esta sección, diseñaremos la estructura para hacer que la string de texto creada sea gomosa.
- Código CSS: En esta sección crearemos el efecto de animación usando animaciones CSS, usaremos la regla @keyframes para especificar el código de animación. Usaremos la propiedad transform para producir la animación.
CSS
<style>
body {
margin: 0;
padding: 0;
font-family: serif;
}
#text {
position: relative;
margin-top: 100px;
text-align: center;
}
h1 {
color: green;
}
#text:hover {
animation: effect linear 1s;
}
@keyframes effect {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1.3, 0.6);
}
50% {
transform: scale(1.1, 0.9);
}
100% {
transform: scale(1, 1);
}
}
</style>
Solución final: es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Rubber Band Text Animation</title>
<style>
body {
margin: 0;
padding: 0;
font-family: serif;
}
#text {
position: relative;
margin-top: 100px;
text-align: center;
}
h1 {
color: green;
}
#text:hover {
animation: effect linear 1s;
}
@keyframes effect {
0% {
transform: scale(1, 1);
}
25% {
transform: scale(1.3, 0.6);
}
50% {
transform: scale(1.1, 0.9);
}
100% {
transform: scale(1, 1);
}
}
</style>
</head>
<body>
<div id="text">
<h1>GeeksforGeeks</h1>
<b>Hover over on the text</b>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA