Em HTML você pode pensar em criar 3 elementos:
2 elementos serão a base e usarei ::before
e ::after
(mas pode usar divs também o elemento principal será para agrupar)
O terceiro elemento será o principal, que recebe os pseudos elementos
Os pseudo elementos ::before
e ::after
serão o "corpo", já o elemento principal será o que irá ajustar a posição dos sub(pseudo)-elementos
O ::after
será a parte de baixo e receberá border-radius: 100%
para virar um circulo, com linear-gradient
fazemos ele ficar apenas metade preenchido.
O ::before
será o a parte de cima, ele é idêntico, você poderia simplesmente inverter a ordem das cores no linear-gradient
, mas eu pessoalmente acho muito mais pratico fazer isto usando transform: rotate(180deg);
que vai virar o elemento de ponta cabeça (eu entendo que dá para rotacionar de diversas formas, mas o efeito é o mesmo no final):
O exemplo estático sem animação para ver o corpo pronto:
body {
background: black;
}
/* todos elementos devem ter a mesma altura, a não ser que queira aplicar margens */
.pacman-css, .pacman-css::before, .pacman-css::after {
width: 100px;
height: 100px;
}
.pacman-css {
position: relative;
}
.pacman-css::before, .pacman-css::after {
content: "";
display: block;
/*posiciona ambos elementos no mesmo lugar*/
position: absolute;
top: 0;
left: 0;
/* aplica a borda para transformar em um circulo */
border-radius: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 50%,
yellow 50%);
/*Aplica o amarelo do 50% até o 100%, ou seja NÃO é necessário aplicar yellow 100% depois */
}
/* o before deve ser a de cima */
.pacman-css::before {
transform: rotate(180deg);
}
<div class="pacman-css">
</div>
Pronto, temos a base do nosso pacman, a segunda parte é aplicar a animação, mas para isso é preciso criar uma animação para a parte de cima e outra para a de baixo.
O ::before
vai animar normalmente a partir da rotação 0deg
ir até a rotação desejada (no exemplo apliquei 30deg
mas você pode mudar isso) e depois voltar ao 0deg
(sei que dá pra ajustar o retorno no próprio animate
, mas o efeito é o mesmo e é para fins didáticos, sugestões comentem)
O ::after
vai animar a parte de baixo, portanto ele vai começar do 180deg
e você pode aplicar o valor menor para que a parte de baixo faça a rotação invertida, no exemplo usei 150deg
, você pode ajustar isso também.
Você também pode mudar a movimentação da parte de baixo ou da cima, inclusive pode aplicar diferentes velocidades, trocando o .5s
de cada animate
, fica a seu critério, o exemplo é simplório e totalmente customizável:
body {
background: black;
}
.pacman-css, .pacman-css::before, .pacman-css::after {
width: 100px;
height: 100px;
}
.pacman-css {
position: relative;
}
.pacman-css::before, .pacman-css::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 50%,
yellow 50%);
}
.pacman-css::before {
transform: rotate(180deg);
animation: anima-pacman-cima .5s infinite;
}
.pacman-css::after {
animation: anima-pacman-baixo .5s infinite;
}
@keyframes anima-pacman-cima
{
0% { transform: rotate(180deg); }
50% { transform: rotate(150deg); }
100% { transform: rotate(180deg); }
}
@keyframes anima-pacman-baixo
{
0% { transform: rotate(0deg); }
50% { transform: rotate(30deg); }
100% { transform: rotate(0deg); }
}
<div class="pacman-css">
</div>