El efecto de teclas danzantes es un tipo de efecto de animación de texto que se puede implementar usando CSS. En este efecto, a cada letra se le da la forma de una tecla del teclado y luego se aplican animaciones para moverla a lo largo del eje X o del eje Y. Este efecto también se conoce como efecto Jumping Key o efecto Piano Key. Generalmente se usa en sitios web educativos para que los niños hagan que el aprendizaje sea divertido e interactivo.
Enfoque: el enfoque consiste en diseñar primero la clave usando un estilo básico y luego usar fotogramas clave para animarla a lo largo de cualquier eje. La propiedad nth-child también se puede usar para retrasar la animación de cada tecla por separado. Este paso es opcional si no se desea ningún retraso entre teclas.
Código HTML: en esta sección HTML, todas las letras están envueltas dentro de la etiqueta <span> que a su vez está envuelta dentro de una etiqueta <h1>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> DANCING KEY EFFECT </title> </head> <body> <h1> <span>G</span> <span>E</span> <span>E</span> <span>K</span> <span>S</span> <span>F</span> <span>O</span> <span>R</span> <span>G</span> <span>E</span> <span>E</span> <span>K</span> <span>S</span> </h1> </body> </html>
Código CSS: la parte CSS del código se puede definir de la siguiente manera:
- Paso 1: Proporcione un color de fondo básico. En este caso, se utiliza el color verde.
- Paso 2: Cree teclas con un color de fondo diferente y aplique sombras de cuadro para diferenciar fácilmente entre cada tecla.
- Paso 3: Defina los fotogramas clave para la animación. El primer cuadro tiene el valor de la propiedad translateY como «0px». El segundo cuadro se mueve por un pequeño valor como «-20px». En el último cuadro, vuelve a 0, creando una animación en bucle.
- Paso 4 (Opcional): Use la propiedad secundaria n-ésima para especificar algún retraso en la animación de cada una de las teclas.
Sugerencia: se puede elegir cualquier valor para la propiedad translateY, pero hay que asegurarse de mantener el valor en 0 para el primer y el último fotograma. Tampoco hay restricción en el número de fotogramas entre el primero y el último fotograma de la animación.
Código CSS:
HTML
<style>
body {
background: green;
}
h1 {
position: absolute;
top: 50%;
left: 10%;
}
h1 span {
color: #262626;
background: #fff;
padding: 10px 20px;
display: table-cell;
box-shadow: inset 0 0 5px
rgba(0, 0, 0, 0.3),
0 5px 0 #ccc;
animation: animate 0.5s infinite;
}
/* Specify the animation keyframes
to be used to move the letters */
@keyframes animate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
/* Specify a slight delay for
each of the letters */
h1 span:nth-child(1) {
animation-delay: 0.1s;
}
h1 span:nth-child(2) {
animation-delay: 0.2s;
}
h1 span:nth-child(3) {
animation-delay: 0.3s;
}
h1 span:nth-child(4) {
animation-delay: 0.4s;
}
h1 span:nth-child(5) {
animation-delay: 0.5s;
}
h1 span:nth-child(6) {
animation-delay: 0.6s;
}
h1 span:nth-child(7) {
animation-delay: 0.7s;
}
h1 span:nth-child(8) {
animation-delay: 0.8s;
}
h1 span:nth-child(9) {
animation-delay: 0.9s;
}
h1 span:nth-child(10) {
animation-delay: 1s;
}
h1 span:nth-child(11) {
animation-delay: 1.1s;
}
h1 span:nth-child(12) {
animation-delay: 1.2s;
}
h1 span:nth-child(13) {
animation-delay: 1.3s;
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para hacer que las teclas danzantes tengan efecto usando HTML y CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
DANCING KEY EFFECT
</title>
<style>
body {
background: green;
}
h1 {
position: absolute;
top: 50%;
left: 10%;
}
h1 span {
color: #262626;
background: #fff;
padding: 10px 20px;
display: table-cell;
box-shadow: inset 0 0 5px
rgba(0, 0, 0, 0.3),
0 5px 0 #ccc;
animation: animate 0.5s infinite;
}
/* Specify the animation keyframes
to be used to move the letters */
@keyframes animate {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
/* Specify a slight delay for
each of the letters */
h1 span:nth-child(1) {
animation-delay: 0.1s;
}
h1 span:nth-child(2) {
animation-delay: 0.2s;
}
h1 span:nth-child(3) {
animation-delay: 0.3s;
}
h1 span:nth-child(4) {
animation-delay: 0.4s;
}
h1 span:nth-child(5) {
animation-delay: 0.5s;
}
h1 span:nth-child(6) {
animation-delay: 0.6s;
}
h1 span:nth-child(7) {
animation-delay: 0.7s;
}
h1 span:nth-child(8) {
animation-delay: 0.8s;
}
h1 span:nth-child(9) {
animation-delay: 0.9s;
}
h1 span:nth-child(10) {
animation-delay: 1s;
}
h1 span:nth-child(11) {
animation-delay: 1.1s;
}
h1 span:nth-child(12) {
animation-delay: 1.2s;
}
h1 span:nth-child(13) {
animation-delay: 1.3s;
}
</style>
</head>
<body>
<h1>
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</span>
<span>F</span>
<span>O</span>
<span>R</span>
<span>G</span>
<span>E</span>
<span>E</span>
<span>K</span>
<span>S</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