Neste artigo vamos listar 15 efeitos de digitação com CSS, ideal para criação de sessões que no site chama atenção do cliente.
Geralmente utilizado em “Heros” que fica localizada logo abaixo do menu, a principal seção do site, são localizados próximos ao CTA principal do site.
Esses efeitos são boas opções para chamar atenção do seu cliente, com chamadas atraentes e elegantes que leva o cliente a clicar no botão(CTA) principal do site.
Neste artigo vamos listar 15 efeitos de textos com CSS , você pode copiar e usar em um projeto ou usar como fonte de inspiração para criar sua própria animação de texto.
Efeito de digitação vintage
See the Pen Typing animation using CSS by Rus James (@rusjames) on CodePen.
Efeito de digitação moderno
See the Pen #21 – Typing text effect with CSS only by Bojan Krsmanovic (@bojankrsmanovic) on CodePen.
Efeito tripagem
See the Pen Pure CSS Typings Effect by Mattia Astorino (@equinusocio) on CodePen.
Efeito de digitação delta
See the Pen Typing Text – Date 14 (24 days of animation) by januaryofmine (@januaryofmine) on CodePen.
Efeito de digitação várias linhas
See the Pen Typing Effect by Asadabbas (@Asadabbas) on CodePen.
Efeito de digitação com lápis
See the Pen Typing effect but with Pencil by Luis Pepen (@LuisPM) on CodePen.
Transmissão: Animação de Texto Brilhante
See the Pen Transmission: Glowing Text Animation by Stephen Scaff (@StephenScaff) on CodePen.
Efeito de digitação várias palavras (JS)
See the Pen Typing Effect by Coding Journey (@Coding_Journey) on CodePen.
Animação de digitação (JS)
See the Pen Text Typing Animation by saqib kifayat (@lscsaqib) on CodePen.
Auto Digitação de Texto (função)
See the Pen Auto Typing Text (function) by Connor Gaunt (@ConnorGaunt) on CodePen.
Efeito de texto love
See the Pen LOVE Text Effect by Matthew Wagerfield (@wagerfield) on CodePen.
Efeito de texto escrevendo e apagando
See the Pen Typing Animation by ramon morcillo (@reymon359) on CodePen.
Efeito digitando (JS)
See the Pen Typing Text with Javascript by Max (@MyXoToD) on CodePen.
Eefeito digitando e apagando (JS)
See the Pen Text typing thingamy by Jack Armley (@jackarmley) on CodePen.
Efeito de digitação SVG
See the Pen SVG Text: Animated Typing by Tiffany Rayside (@tmrDevelops) on CodePen.
Conclusão
Todos os efeitos disponíveis nessa listagem estão disponíveis gratuitamente no codepen, alguns deles usam Javascript para realizar os efeitos de transição, porém alguns são apenas com CSS.
Você pode usar cada um deles em seu projeto ou usar apenas como fonte de inspiração como dito antes.
Boa sorte espero que tenha gostado, caso tenha algum efeito novo deixe ai nos comentários 🙂
Veja também aqui no nosso site outro artigo com 10 CSS de cartão de crédito para modernizar seu projeto. para você usar em seu próximo projeto.
