Você já viu aqueles efeitos de máquina de escrever em sites e gostaria de saber como fazer isso sem a necessidade de usar JavaScript? Neste tutorial, vou te mostrar como criar um efeito de máquina de escrever apenas com HTML e CSS.
Passo 1: Estrutura básica do HTML
Vamos começar criando a estrutura básica do nosso documento HTML. Abra o seu editor de código favorito e crie um novo arquivo HTML. Dentro do arquivo, insira o seguinte código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Efeito Máquina de Escrever</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="conteudo">
<h1 class="titulo"></h1>
</div>
</body>
</html>Neste código, criamos uma estrutura básica com a tag h1 que será o elemento no qual o efeito de máquina de escrever será aplicado.
Passo 2: Estilizando com CSS
Agora vamos estilizar o nosso documento HTML com CSS para criar o efeito de máquina de escrever. Crie um novo arquivo chamado style.css e insira o seguinte código:
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.conteudo {
text-align: center;
}
.titulo {
font-size: 2em;
white-space: nowrap;
overflow: hidden;
animation: escrever 2s steps(40) infinite;
}
@keyframes escrever {
0% {
width: 0;
}
100% {
width: 100%;
}
}Neste código, aplicamos estilos básicos ao nosso documento, como a fonte, cor de fundo e a centralização do conteúdo na página. O principal destaque está no CSS que aplica o efeito de máquina de escrever ao nosso título. O @keyframes cria a animação que faz com que o título seja revelado como se estivesse sendo digitado.
Passo 3: Testando o efeito
Agora que o nosso código está pronto, abra o arquivo HTML no seu navegador. Você deverá ver o título sendo revelado como se estivesse sendo digitado por uma máquina de escrever.
Este é um procedimento simples e fácil de ser aplicado em qualquer página web. Com um pouco de criatividade, você pode customizar o efeito de máquina de escrever para se adequar ao design do seu site. Espero que este tutorial tenha sido útil e que você consiga aplicar o efeito em seus projetos!
qual o nome dessa extensão de indentação?
Show!!! caso eu queria bota frases onde não sei sempre a quantidade de caractereces o que posso fazer ? parabéns obg
Gente, tinha feito um projeto aonde a tag "p" simplismente sumia quando eu colocava a propriedade "overflow: hidden;", caso isso aconteça com vocês também, tentem colocar a tag "p" dentro de uma tag "div"
Tem como fazer com que se repita automaticamente?
Nossa, em pensar que tenho trilha longa para andar, …
O livro é de 95.
se fez em 1 minuto o que muitos youtuber levam 20 minutos kkkkk
Perfeito !
pisca reference
Maneiro
Maneira mais fácil, use um timer e a cada 1 segundo ele vai colocando uma letra 🙂
Ótima explicação!! Parabéns pelo vídeo mano, já deixei o likezão! ✌
Caracas já me inscrevi e salvei uns vídeos seus na minha playlist de tão bons kkkkk vlw ❤
maravilhoso! funcionou bem 🎉
Parabéns top
Eu fiz passo a passo e não funcionou só aparece o olá sem nada 😢 é algo no VS eu tô fazendo faculdade de si e já terminei o primeiro semestre e não tem vi que não tem nada de errado mas mesmo assim não funciona será que é o vscode ?
Que vídeo prático, obrigadaaaa !
valeuuuuuuuuuuu irmão
obg! eu estava procurando por esse typing animation pra colocar no portfolio
Overflow 🤨
Seu canal tem excelentes conteúdos, poste sempre mais materiais que nos ajudam e muito. Muito grata😊