La animación de texto borroso se conoce como efecto ahumado y se utiliza para darle a nuestro texto una animación borrosa. El texto se desdibuja linealmente en una dirección y luego vuelve a aparecer.
Enfoque: El enfoque de este artículo es bastante simple. Estamos animando el efecto de desenfoque usando la función de desenfoque() . Luego estamos usando la propiedad secundaria n-ésima para aplicar el retraso de la animación. Ahora vamos a sumergirnos directamente en el código.
Código HTML: hemos creado un elemento div y los caracteres de texto de carga están envueltos dentro de un elemento span.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>GeeksforGeeks</title> </head> <body> <div class="geeks"> <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> </div> </body> </html>
Código CSS:
- Paso 1: el primer paso es simple: hemos alineado nuestro texto para centrarlo y proporcionar un fondo a nuestro cuerpo.
- Paso 2: luego proporcionamos una animación lineal con un identificador de fotograma clave como animado .
- Paso 3: ahora usamos fotogramas clave para aplicar la función de desenfoque a diferentes fotogramas de la animación.
- Paso 4: El paso final es la aplicación del concepto n-th child para proporcionar un retraso de animación a cada personaje para que solo un personaje se desenfoque en un punto de tiempo.
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.geeks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: 800;
letter-spacing: 5px;
}
.geeks span {
animation: animate 3s linear infinite;
}
.geeks span:nth-child(1) {
animation-delay: 0s;
}
.geeks span:nth-child(2) {
animation-delay: 0.1s;
}
.geeks span:nth-child(3) {
animation-delay: 0.2s;
}
.geeks span:nth-child(4) {
animation-delay: 0.3s;
}
.geeks span:nth-child(5) {
animation-delay: 0.4s;
}
.geeks span:nth-child(6) {
animation-delay: 0.5s;
}
.geeks span:nth-child(7) {
animation-delay: 0.6s;
}
.geeks span:nth-child(8) {
animation-delay: 0.9s;
}
.geeks span:nth-child(9) {
animation-delay: 0.8s;
}
.geeks span:nth-child(10) {
animation-delay: 0.9s;
}
.geeks span:nth-child(11) {
animation-delay: 1s;
}
.geeks span:nth-child(12) {
animation-delay: 1.1s;
}
.geeks span:nth-child(13) {
animation-delay: 1.2s;
}
@keyframes animate {
0% {
filter: blur(0);
}
40% {
filter: blur(20px);
}
80% {
filter: blur(0);
}
100% {
filter: blur(0);
}
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un efecto de animación de texto de carga.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.geeks {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
font-weight: 800;
letter-spacing: 5px;
}
.geeks span {
animation: animate 3s linear infinite;
}
.geeks span:nth-child(1) {
animation-delay: 0s;
}
.geeks span:nth-child(2) {
animation-delay: 0.1s;
}
.geeks span:nth-child(3) {
animation-delay: 0.2s;
}
.geeks span:nth-child(4) {
animation-delay: 0.3s;
}
.geeks span:nth-child(5) {
animation-delay: 0.4s;
}
.geeks span:nth-child(6) {
animation-delay: 0.5s;
}
.geeks span:nth-child(7) {
animation-delay: 0.6s;
}
.geeks span:nth-child(8) {
animation-delay: 0.9s;
}
.geeks span:nth-child(9) {
animation-delay: 0.8s;
}
.geeks span:nth-child(10) {
animation-delay: 0.9s;
}
.geeks span:nth-child(11) {
animation-delay: 1s;
}
.geeks span:nth-child(12) {
animation-delay: 1.1s;
}
.geeks span:nth-child(13) {
animation-delay: 1.2s;
}
@keyframes animate {
0% {
filter: blur(0);
}
40% {
filter: blur(20px);
}
80% {
filter: blur(0);
}
100% {
filter: blur(0);
}
}
</style>
</head>
<body>
<div class="geeks">
<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>
</div>
</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