El efecto de animación de texto que se desvanece es uno de los efectos más exigentes en el diseño de UI/UX. Este efecto se puede lograr usando HTML5 y CSS3. En el efecto de desvanecimiento de texto, cada vez que cargamos la ventana, el texto comenzará a desaparecer lentamente. Podemos implementar este efecto usando la propiedad de animación en CSS3.
Código HTML: En esta sección, haremos el diseño de la página web.
- índice.html
HTML
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <div> <h2>GeeksforGeeks</h2> </div> </body> </html>
Código CSS: en esta sección, agregaremos algunas propiedades CSS para crear un efecto de texto que se desvanece.
CSS
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: green;
animation-name: gfg;
animation-duration: 4s;
}
h2 {
position: relative;
margin: 0;
font-size: 5em;
font-weight: 750;
color: white;
z-index: 1;
overflow: hidden;
}
h2:before {
content: '';
position: absolute;
right: 130%;
width: 130%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%, green 5%, green 100%);
animation: geeksforgeeks 5s linear backwards;
}
@keyframes geeksforgeeks {
from {
right: 130%
}
to {
right: -10%;
}
}
</style>
Código completo: en esta sección, combinaremos las dos secciones anteriores para crear un efecto de texto que se desvanece usando HTML5 y CSS3.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: green;
animation-name: gfg;
animation-duration: 4s;
}
h2 {
position: relative;
margin: 0;
font-size: 5em;
font-weight: 750;
color: white;
z-index: 1;
overflow: hidden;
}
h2:before {
content: '';
position: absolute;
right: 130%;
width: 130%;
height: 100%;
background: linear-gradient(90deg,
transparent 0%, green 5%, green 100%);
animation: geeksforgeeks 5s linear backwards;
}
@keyframes geeksforgeeks {
from {
right: 130%
}
to {
right: -10%;
}
}
</style>
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ritikumariupadhyay24 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA