Page 63 - Locaweb - Edição 35
Basic HTML Version
lw
programação
enxuto e podemos focar nas ideias
principais, com a vantagem de que
o código vai continuar funcionando
quando a crise acabar.
Para usar o PrefixFree, basta colocar
a próxima linha no HTML:
<script src="http://thecodeplayer.com/
uploadsjs/prefixfree.js" type="text
javascript"></script>
A implementação do cronômetro
é relativamente simples. Primeiro
dispomos verticalmente duas
sequências de dígitos, uma para
representar a unidade e a outra, a
dezena dos segundos. Em seguida,
fazemos com que apenas um dígito
seja visível.
Então, usamos recursos de
animação do CSS3 para deslocar
a linha e, depois, limitamos a
exibição ao próximo dígito. Com
esse processo sendo repetido a cada
tempo fixado, temos o efeito do
cronômetro avançando.
Primero passo
// Vamos ao HTML!
Primeiro criaremos as sequências de
dígitos do nosso cronômetro.
<div class="container">
<div class="timer">
<div class="digito dezseg bseis">
0 1 2 3 4 5</div>
<div class="digito seg bdez">
0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
E esse é todo o HTML que vamos
precisar para ter o primeiro exemplo
funcionando: um cronômetro de 60
segundos. Agora todo o trabalho
vai ser feito em cima do CSS,
configurando as classes citadas. O que
devemos fazer agora é configurar o
texto e a sua disposição:
.digito {
width: 0.65em;
line-height: 50px;
font-size: 60px;
font-family: arial;
text-align: center;
color: black;
position: relative;
float: left;
}
Com o código acima, podemos ver
como os números estão dispostos.
Segundo passo
// Agora o tutorial
começa a ficar animado! Acrescente
as seguintes linhas no seu CSS:
@keyframes bdez {
0% { top: 0; }
100% { top: -500px; }
}
@keyframes bseis {
O código do PrefixFree pode ser encontrado no repositório do
projeto, que fica no endereço eletrônico
Acima, os dígitos que farão parte do
cronômetro desenvolvido com CSS e HTML
locaweb
63
