Efeito de animação de texto esmaecido usando CSS3
O efeito de animação de texto esmaecido é um dos efeitos mais exigentes no design de UI / UX. Esse efeito pode ser obtido usando HTML5 e CSS3. No efeito de texto esmaecido, sempre que carregamos a janela, o texto começa a desaparecer lentamente. Podemos implementar esse efeito usando a propriedade de animação em CSS3.
Código HTML: Nesta seção, faremos o layout da página web.
- index.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: nesta seção, adicionaremos algumas propriedades CSS para criar um efeito de texto esmaecido.
<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: nesta seção, combinaremos as duas seções acima para criar um efeito de texto esmaecido usando HTML5 e CSS3.
<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>
Saída:
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva