Essa é a parte 02 do artigo em que falo um pouco sobre o tema que desenvolvi, para um desafio CSS com tema livre lançado pelo Bernard De Luna na sua coluna aqui no iMasters, na esperança de que as funcionalidades aplicadas sirvam como fonte de aprendizado, base para estudos e motivação para criações mais sofisticadas.

Se você chegou a essa página e ainda não leu a Parte o1, aconselho a fazê-lo antes de continuar, portanto consulte a parte o1. Não está em questão o design, a aplicação prática, a acessibilidade e outras questões que obviamente podem ser melhoradas, pois elas não são o foco do tema.

Fogos de artifício

Ao abrir a cortina e revelar o palco, simula-se a soltura de fogos de artifício. Um rojão sobe no meio da tela e explode em estrelinhas coloridas. O código é o seguinte:

CSS

/* Fireworks */
.fireworks {
position: absolute;
z-index: 25;
top: 25%;
left: 50%;
margin: -150px 0 0 -170px;
font-weight: bold;
font-size: 150%;
color: red;
opacity: 0;
}
pre span { color: lime; }
.o { color: orange; }
.rojao {
display: block;
font-size:130%;
position:absolute;
bottom: -20px;
left: 30%;
z-index: 25;
color: yellow;
}

/* Solta rojão */
@-webkit-keyframes rojao {
0% { bottom: -20px; }
80% { left: 50%; }
81% { left: 50%; bottom: 70%; margin-left: -35px; color: yellow; }
82% { color: black;}
100% { color: black;}
}
@keyframes rojao {
/* idem */
}
.rojao {
animation: rojao 2s 7s;
-webkit-animation: rojao 2s 7s;
-ms-animation: rojao 2s 7s;
}

/* Explode rojão */
@-webkit-keyframes fire {
0% { opacity: 0; }
0.1% { opacity: 1; }
10% { opacity: 1; }
10.1% { opacity: 0; }
20% { opacity: 0; }
20.1% { opacity: 1; }
30% { opacity: 1; }
30.1% { opacity: 0; }
40% { opacity: 0; }
40.1% { opacity: 1; }
50% { opacity: 1; }
50.1% { opacity: 0; }
60% { opacity: 0; }
60.1% { opacity: 1; }
70% { opacity: 1; }
70.1% { opacity: 0; }
80% { opacity: 0; }
80.1% { opacity: 1; }
90% { opacity: 1; }
90.1% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fire {
/* idem */
}
.fireworks {
animation: fire 2s 9s;
-webkit-animation: fire 2s 9s;
-ms-animation: fire 2s 9s;
}

HTML

<span>¤</span>

<div>
<pre>
<span>∗</span>        ∗  <span>∗</span>   ∗
∗    <span>∗</span>      ∗   ∗    <span>∗</span>

∗     ∗         ∗      <span>∗</span>
<span>∗</span>         <span>∗</span>            <span>∗</span>

∗
<span>∗</span>                 <span>∗</span>     <span>∗</span>
∗       <span>∗</span>         ∗      ∗

∗    <span>∗</span>     <span>∗</span>

∗

</pre>
</div>

Código comentado

O elemento span.rojao contém a entidade HTML &#164 (¤) a qual é aplicada a função de animação que foi denominada rojao, destinada a fazer a subida do rojão até o ponto de explosão.

Quando o rojão atinge seu ponto mais alto na tela, é aplicada a função de animação que foi denominada fire, destinada a animar o elemento div.fireworks, que contém a entidade HTML ∗ (∗) posicionadas com o elemento <pre>. Elementos span devidamente estilizados dão cores diferentes a essas entidades.

Transição noite/dia

Os fundos dos containers dia e noite são em gradiente e superpostos. Inicialmente, revela-se o fundo da noite e a transição se faz por animação da opacidade do fundo da noite que, ao ser diminuida, vai revelando o fundo do dia.

O fundo em gradiente e a animação da opacidade são obtidas com as regras CSS mostradas a seguir:

CSS

/* fundo noite */
.noite {
background: black;
opacity:1;
min-height: 100%; width: 100%; position: absolute;
background-image: -moz-repeating-linear-gradient(
top, #000, #000 20%, #000 10%, #000 10%, #2b2b2b 60%,
#555 80%, #808080 90%, #aaa 100%);
background-image: -webkit-repeating-linear-gradient(
/* idem */ );
background-image: -ms-repeating-linear-gradient(
/* idem */ );
}

/* fundo dia */
.dia {
background: white;
min-height: 100%; width: 100%; position: absolute;
background-image: -moz-repeating-linear-gradient(
top, #164cb9, #164cb9 10%, #4570c7 30%, #7394d5 40%,
#a2b7e3 50%, #d0dbf1 60%, #fff 100%);
background-image: -moz-repeating-linear-gradient(
/* idem */ );
background-image: -webkit-repeating-linear-gradient(
/* idem */ );
background-image: -ms-repeating-linear-gradient(
/* idem */ );
}

/* transição noite/dia */
@-webkit-keyframes amanhecer {
0% { opacity: 1; }
10% {   opacity: 0;}
100% {   opacity: 0;}
}
@keyframes amanhecer {
0% { opacity: 1; }
10% { opacity: 0;}
100% { opacity: 0;}
}
.noite {
animation: amanhecer 95s 10s;
-webkit-animation: amanhecer 95s 10s;
-ms-animation: amanhecer 95s 10s;
}

Durante a transição noite/dia ocorrem os seguintes eventos:

Desaparecem as estrelas. A marcação HTML e as regras CSS para esse efeito, são mostradas a seguir:

HTML

<div>
<pre>
•         ∗               •
•         ∗            •       •

•         ∗            ∗

∗                 •         ∗
∗               •         ∗
</pre>

O elemento div.astros é o container para as estrelas, que são constituídas pelos caracteres HTML ∗ (∗) e • (•)

CSS

/* estrelas */
.astros {
position:absolute;
width:100%;
top:0;
margin:0;
color: white;
font-size:100%;
z-index: 21;
opacidade: 1;
}

/* desaparecem estrelas */
@-webkit-keyframes estrelas {
0% { opacity: 1; }
20% { opacity: 0;}
100% { opacity: 0;}
}
@keyframes estrelas {
0% { opacity: 1; }
20% { opacity: 0;}
100% { opacity: 0;}
}

Desaparece a lua e aparece o sol. Esses efeitos são com animação das propriedades left e right da lua e do sol. Ver código fonte da página.

Demais efeitos

Os demais efeitos de animação são conseguidos de forma semelhante. Não os detalharemos, pois com simples exame do código fonte da página e com a base adquirida com a leitura será fácil entendê-los.

Convém notar que o efeito da bola final com a mensagem de “Recarregue a página” foi obtido com uso do novo elemento da HTML5 marquee e o coração pulsando no “Eu ♥ CSS” foi obtido com a declaração CSS text-decoration: blink; (funciona no Firefox).