Page 64 - Locaweb - Edição 35

lwprogramação
64 locaweb
Um cronômetro
emquatro passos
0% { top: 0; }
100% { top: -300px; }
}
.bdez {
animation: bdez 1s steps(10, end) infinite;
animation-play-state: running; }
.bseis {
animation: bseis 1s steps(6, end) infinite;
animation-play-state: running; }
.seg { animation-duration: 10s; }
.dezseg { animation-duration: 60s; }
No nosso código HTML, há duas
sequências, uma de 0 a 5, que conta as
dezenas dos segundos e outra de 0 a 9,
que marca os segundos. O que fizemos
foi usar o @keyframe para determinar
o quanto devemos deslocar cada
dígito e animation para determinar a
velocidade e o passo da animação.
Esse cronômetro já começa rodando,
mas é possível associar o animation-
play-state à ação de um botão que
modifica o estado de paused para
running. Vamos aprender a fazer isso
assim que terminarmos de transformar
a animação que vimos em algo mais
parecido com um cronômetro.
Precisamos exibir apenas os
dois dígitos que representam os
segundos atuais, o que pode ser feito
ao configurar a classe timer para
exibir apenas o texto de determinada
região, limitando a altura de
acordo com o tamanho do texto e
escondendo tudo o que está fora do
quadro. Segue o código:
.timer {
height: 50px;
background: black;
overflow: hidden;
display: inline-block;
position: relative; }
Aqui, por uma questão de estética,
configuramos a posição e a disposição
do texto, com as propriedades display
e position. Também mudamos a cor
do fundo para preto, então, para que a
animação possa ser vista, é necessário
mudar a propriedade color da classe
digito para white:
color: white;
Ainda visando uma boa
apresentação, vamos centralizar o
cronômetro configurando a classe
container concluindo o segundo passo:
.container {
padding: 200px;
text-align: center; }
Terceiro passo // Já temos um
cronômetro! Podemos explorar ainda
outro recurso interessante do CSS3,
permitindo que nossa aplicação
Hoje em dia, é possível
fazer aplicações muito bem
elaboradas com CSS3 e HTML
Cronômetros:
elementos como
cores, fontes e
natureza do
contador são
ajustados facilmente
Poucos ajustes no código permitem
a alteração de itens como cor de fundo