Como criar Wave Text Effect
Introdução
Neste tutorial, vou mostrar como criar Wave Text Effect utilizando apenas html, CSS. Este efeito é visualmente atraente e pode ser facilmente implementado, você poderá utilizar este efeito para animar textos do seu site ou blog.
O Tutorial será breve e de forma rápida não será necessário o uso de nenhum tipo de biblioteca externa, será apenas html e css .
Primeiro passo você deverá criar a estrutura da página, para isso crie um arquivo html contendo o código que mostro abaixo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Wave Text Effect</title></head><body></body></html>
Logo após crio um componente h1 que contém o texto a ser animado:
<h1 class="animated-text"> <span>A</span><span>n</span><span>i</span><span>m</span><span>a</span><span>ç</span><span>ã</span><span>o</span></h1>
Por ultimo adiciono o css responsável pela estilização da página e pela animação do texto:
<style> body { background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; font-family: 'Courier New', Courier, monospace; } .animated-text { display: inline-block; font-size: 9vw; line-height: 9vw; color: #FB4264; text-shadow: 0 0 3vw #F40A35; animation: neon 1s ease infinite; } .animated-text span { display: inline-block; animation: float 1.5s ease-in-out infinite; } /* Animação flutuante */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Animação neon */ @keyframes neon { 0%, 100% { text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914; color: #FED128; } 50% { text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A; color: #806914; } } /* Delays para criar o efeito de onda */ .animated-text span:nth-child(1) { animation-delay: 0s; } .animated-text span:nth-child(2) { animation-delay: 0.1s; } .animated-text span:nth-child(3) { animation-delay: 0.2s; } .animated-text span:nth-child(4) { animation-delay: 0.3s; } .animated-text span:nth-child(5) { animation-delay: 0.4s; } .animated-text span:nth-child(6) { animation-delay: 0.5s; } .animated-text span:nth-child(7) { animation-delay: 0.6s; } .animated-text span:nth-child(8) { animation-delay: 0.7s; } </style>
No código acima, utilizei a tag <style> para adicionar o CSS diretamente no arquivo HTML. Abaixo deixo uma breve explicação das principais partes do CSS:
- body: Nesta tag adicionei as propriedades para centralizar o conteúdo na tela e definir o fundo e o alinhamento dos componentes.
- .animated-text: Define o tamanho da fonte e exibe o texto como um bloco inline.
- .animated-text span: Aplica a animação a cada letra individualmente, com um atraso calculado para criar o efeito de onda.
- @keyframes float: Define a animação, movendo cada letra para cima e para baixo.
- @keyframes neon: Define a animação do texto alternando as cores em neon.
- animated-text span:nth-child(1): Defino o tempo de cada letra;
Deixo aqui um vídeo curto do processo e de como ficou animação do texto:
Deixo aqui um vídeo do processo completo de como ficou animação do texto:
Conclusão
Com esses simples passos, você consegue de forma rápida criar um efeito para os textos de seu site ou blog deixando mais atraente usando apenas HTML e CSS. Caso necessite você pode personalizar a animação e estilização conforme a sua necessidade , alterando as cores ou até mesmo o tempo de duração entre as letras.
Código fonte do tutorial Wave Text Effect:
