La animación de máquina de escribir, como sugiere el nombre, es un efecto que se parece a una animación de escritura, como si estuviera escrito por una máquina de escribir. Vamos a crear esta animación sin JavaScript y solo usando HTML y CSS.
Planteamiento: Para lograr el efecto máquina de escribir usaremos las siguientes propiedades CSS.
- animation-timing-function : Necesitamos especificar el tiempo de la animación en segundos o milisegundos para que la animación sea más rápida y se vea perfecta. También necesitamos especificar pasos para que cada letra no aparezca en un solo flujo sino una por una como se ve en las máquinas de escribir. En el siguiente código, usamos el ejemplo GeeksforGeeks, ya que el número total de letras en GeeksforGeeks es 13, por lo que el número de pasos utilizados es 13.
- overflow : para que cada texto aparezca de acuerdo con la animación y no se revele todo a la vez, overflow: hidden se usa en el siguiente código.
- white-space : Para obtener la animación en una sola línease usa nowrap .
- border-color : como se ve en el siguiente código, el color del borde está animado desde un negro demasiado transparente para darle a la animación un toque realista de un cursor parpadeante. También se puede usar cualquier color que no sea el negro.
- ancho : para obtener una animación similar a la escritura, el ancho se anima de 0% a 50% (esto puede variar según el alto/ancho del texto o el espacio de texto dado).
Ejemplo: en este ejemplo, utilizaremos las propiedades definidas anteriormente para crear una animación de máquina de escribir.
index.htm
<!DOCTYPE html>
<html>
<head>
<title>Typewriter Effect</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
{
box-sizing: border-box;
padding: 0;
margin: 0;
outline: none;
}
body {
background-color: #2ca32c;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}
h1 {
font-size: 90px;
white-space: nowrap;
overflow: hidden;
animation: typewriter 2s steps(13) infinite alternate,
blink 800ms steps(13) infinite normal;
border-right: 5px solid black;
}
@keyframes typewriter {
from {
width: 0%;
}
to {
width: 50%;
}
}
@keyframes blink {
from {
border-color: black;
}
to {
border-color: transparent;
}
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Nota: Para otro texto más largo o más corto, los cambios requeridos deben realizarse en el tamaño de fuente, pasos. El tiempo de la animación del texto y el cursor también deben cambiarse en consecuencia.
Publicación traducida automáticamente
Artículo escrito por tausifsiddiqui y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA