Dia 3/2019 - Pacman Loader

Desafio #92daysofcode que fiz no final de 2019. Nesse artigo temos o dia 3, mostrando animação no CSS, com keyframes.

Pré-visualização

Código

Começamos com a estrutura do HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Day 3</title>
<style>
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; }
html { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
* { margin: 0; padding: 0; }
body { background: #000; font-family: Arial, Helvetica, sans-serif; }
</style>
<link rel="stylesheet" type="text/css" href="./day-3.css">
</head>
<body>
<!-- loader -->
</body>
</html>
1
2
3
<div class="loader">
<div class="pacman"></div>
</div>

Nada demais no HTML. Nos valores para o seletor do loader, podemos ver a atulização das unidades vh e vw.

  • A medida vh é igual a 1/100 da altura da viewport.
  • A medida vw é igual a 1/100 da largura da viewport.

Ex:

  • Altura do navegador sendo igual a 600px, 1vh equivale a 6px.
  • Largura do navegador sendo igual a 800px, 1vw equivale a 8px.
1
2
3
4
5
6
7
.loader {
height: 100vh;
overflow: hidden;
position: absolute;
width: 100vw;
z-index: 1;
}

Abaixo, como a última propriedade, temos a will-change, que antecipa para o navegador a ocorrência de uma modificação em um elemento. Com isso, podemos evitar o efeito tremido no processamento do transform.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.pacman {
display: block;
height: 5em;
left: 50%;
margin: -2.5em;
position: absolute;
top: 50%;
width: 5em;
z-index: 3;
}

.pacman:before,
.pacman:after {
content: "";
background-color: #c5ab03;
border-radius: 5em 0 0 5em;
display: block;
height: 5em;
position: absolute;
transform-origin: 100% 50%;
width: 2.5em;
will-change: transform;
}

Agora, podemos ver como é utilizado a propriedade animation com a regra @keyframes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.pacman:before { animation: _pacmanTop 0.5s ease infinite; transform: rotate(45deg); }
.pacman:after { animation: _pacmanBottom 0.5s ease infinite; transform: rotate(-45deg); }

@keyframes _pacmanTop {
0% { transform: rotate(45deg); }
50% { transform: rotate(90deg); }
100% { transform: rotate(45deg); }
}

@keyframes _pacmanBottom {
0% { transform: rotate(-45deg); }
50% { transform: rotate(-90deg); }
100% { transform: rotate(-45deg);}
}

Conclusão

A postagem original pode ser vista no meu Instagram e o código está acessível no meu Github.

Ao fechar este aviso ou continuar navegando no site Nerd Calistênico, você aceita o uso de cookies.

Este site usa cookies para assegurar a melhor experiência para os nossos usuários. Consulte nossa política de privacidade.

Uma nova versão está disponível. Clique aqui para atualizar.