Texto Animado Néon:
Aprenda a criar um texto animado em néon vibrante com este tutorial detalhado usando apenas HTML e CSS.
Este projeto consiste em um efeito visual de texto em néon que pisca de maneira irregular, como os sinais de néon reais.
Veja o Texto Animado em Néon em funcionamento neste link. Texto Animado em Néon.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie duas pastas com os nomes... index.html e style.css.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang= "pt-br" >
<head>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<link rel= "stylesheet" href= "style.css" >
<title> Texto Néon Animado </title>
</head>
<body>
<div class= "neon-text" > Texto em Néon </div>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
font-family: Arial, sans-serif;
}
.neon-text {
font-size: 60px;
color: #fff;
text-shadow:
0 0 10px #00e6ff,
0 0 20px #00e6ff,
0 0 30px #00e6ff,
0 0 40px #00e6ff,
0 0 50px #00e6ff,
0 0 60px #00e6ff,
0 0 70px #00e6ff;
animation: flicker 1.5s infinite alternate;
}
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
text-shadow:
0 0 5px #00e6ff,
0 0 10px #00e6ff,
0 0 15px #00e6ff,
0 0 20px #00e6ff,
0 0 25px #00e6ff,
0 0 30px #00e6ff,
0 0 35px #00e6ff;
}
20%, 24%, 55% {
text-shadow: none;
}
}
3° Passo: Testar o Projeto!
Agora, com os dois arquivos (index.html e style.css) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!