<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 50px;
font-family: monospace;
border-right: 4px solid;
width: 12ch; /* 12 caracteres */
white-space: nowrap; /*para não quebrar a linha*/
overflow: hidden; /* esconde os caracteres que ainda não foram digitados*/
animation: typing 2s steps(12), /* animação de 2 seg, 10 caracteres */
blinking 0.5s infinite step-end alternate; /* 0.5 seg de duração */
}
@keyframes typing { /* animação 1 */
from {
width: 0; /* Começa com largura de 0 */
}
}
@keyframes bliking { /* animação 2*/
50% {
border-color: transparent;
}
}
</style>
</head>
<body>
<p>Olá mundo !</p>
</body>
</html>
Nenhum comentário:
Postar um comentário