Cascading Style Sheets (CSS) já percorreu um longo caminho desde o seu início. Há coisas que são possíveis apenas com CSS que você talvez não conheça, graças à contínua evolução e aprimoramento da linguagem.
Um dos avanços mais notáveis em CSS é o surgimento e o refinamento das funções CSS, que expandiram significativamente as capacidades e o poder de estilizar o conteúdo da web.
últimas postagens
Qual é o efeito da máquina de escrever?
O efeito máquina de escrever é uma técnica de animação de texto que simula o processo de revelação progressiva do conteúdo, imitando o ato de digitar à medida que ele se desenrola diante dos olhos do espectador. Este efeito é uma reminiscência das máquinas de escrever antigas, dos primeiros terminais de computador ou das interfaces de linha de comando (CLIs).
O aparecimento gradual do texto acrescenta um elemento de suspense e intriga, incentivando o público a prestar muita atenção ao desenrolar da mensagem.
Como funciona a função CSS steps()
As funções em CSS introduzem um nível de flexibilidade que antes era difícil de alcançar usando apenas estilos estáticos. A função steps() é uma função popular usada em animações CSS. Faz com que as animações pareçam estar avançando em etapas distintas e discretas, em vez de fazerem uma transição suave.
steps() é uma função de temporização de animação que aceita dois parâmetros. O primeiro parâmetro denota o número de etapas que você deseja que sua animação execute. O segundo parâmetro define o comportamento de cada etapa. A sintaxe para as funções steps() é semelhante a esta:
animation-timing-function: steps(n, direction)
No bloco de código acima, a função steps() possui dois parâmetros, a saber: n e direção. O parâmetro de direção pode ser inicial ou final.
Definir a direção de início garante que a primeira etapa seja concluída assim que a animação começar. Considerando que definir a direção para o fim executará a última etapa quando a animação terminar. Para ilustrar a importância da função steps(), dê uma olhada no seguinte código HTML:
<div class="container">
<div></div>
</div>
O bloco de código acima define um div contêiner com um div filho. Se você quiser que o div filho deslize pela tela, use animações CSS como esta:
.container {
background-color: blue;
}div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
}
@keyframes movebox {
100% {
transform: translateX(100vw);
}
}
O bloco de código acima utiliza a regra @keyframes para definir uma animação chamada movebox. Essa animação é então aplicada ao div filho, fazendo com que ele se mova suavemente pela tela em um loop infinito.
Se você não gosta de animação suave e deseja obter um efeito “instável”, você pode usar a função steps() assim:
div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4s infinite;
animation-timing-function: steps(10, end);
}
Como você pode ver no GIF abaixo, incorporar a função steps() com um valor de parâmetro 10 animará o div filho em etapas em vez de uma animação suave. Quanto maior o número de etapas, menos instável parecerá sua animação.
No exemplo acima, o parâmetro de direção é fornecido. No entanto, se você omitir a direção, o navegador usará end como valor padrão para direção.
Criando o efeito de máquina de escrever
Agora que você entende como funciona a função steps(), é hora de colocar em prática tudo o que aprendeu. Crie uma nova pasta e dê a ela um nome apropriado. Nessa pasta, adicione um arquivo index.htm para marcação e um arquivo style.css para estilo.
No arquivo index.htm, adicione o seguinte código padrão:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-typewriter-effect-with-css/style.css" />
</head>
<body>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Reiciendis, tempore!
</div>
</div>
</body>
</html>
O bloco de código acima define a marcação para um site HTML simples. Há um contêiner div que contém outro div com algum texto fictício.
Animando o Texto
Abra o arquivo estilos.css e defina a largura do div do contêiner com a largura de seu conteúdo.
.container{
width: fit-content;
}
A seguir, usando a regra @keyframes, defina uma animação que controle como a animação progride ao longo do tempo. Defina a largura como “0%” em 0%. Em 100%, defina a largura para “100%” assim:
@keyframes type-text {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Em seguida, selecione o elemento com o texto do nome da classe e defina a propriedade overflow como oculta. Isso garantirá que o texto permaneça oculto enquanto o efeito de digitação não for iniciado. Depois de fazer isso, certifique-se de que o texto permaneça em uma linha, definindo a propriedade whitespace como nowrap. Dê à classe de texto uma fonte monoespaçada e adicione uma borda vertical verde à direita do texto.
Esta borda dará a aparência de um cursor. Defina o tamanho da fonte apropriado e a propriedade de animação para digitar texto. Por fim, adicione a função steps() à função de tempo de animação.
.text {
overflow: hidden;
white-space: nowrap;
font-family: "Courier New", Courier, monospace;
border-right: solid 10px green;
font-size: 23px;
animation: type-text forwards 4s;
animation-timing-function: steps(40);
}
Ao executar o código no navegador, você deverá ver o seguinte:
Se quiser um efeito de digitação mais longo, você pode ajustar a duração da animação e o número de etapas especificadas na função steps().
Dando vida ao cursor
O efeito da máquina de escrever está quase completo, embora falte um recurso, que é o cursor piscante. Lembre-se de que no último bloco de código, uma borda direita foi definida no texto para servir como cursor. Você também pode adicionar uma animação a este cursor usando a regra @keyframes.
@keyframes cursor-blink {
0% {
border-color: transparent;
} 100% {
border-color: green;
}
}
Após definir a animação personalizada, adicione o nome da animação à propriedade de animação na classe de texto e defina a duração para 0,6 segundos.
.text{
animation: type-text forwards 4s,
cursor-blink .6s infinite;
}
Agora, ao executar o código, você verá um cursor piscando.
O poder das funções CSS
As funções CSS revolucionaram a forma como os sites são construídos, oferecendo um kit de ferramentas notável para você como desenvolvedor. Essas funções versáteis permitem estilos e interações dinâmicas que antes eram reservadas para linguagens de script complexas.
De manipulações de cores a layouts responsivos, animações e transformações criativas, as funções CSS expandiram as possibilidades do web design. Com funções como calc() para cálculos flexíveis, linear-gradient() para fundos impressionantes e translate() para animações cativantes, você pode criar experiências de usuário visualmente atraentes e envolventes.
![Melhore seu processo de recrutamento com o mapeamento de talentos [5 Templates]](https://etechpt.com/wp-content/themes/blogstream/img/thumb-medium.png)
