Skip to content

Instantly share code, notes, and snippets.

@vincentopensourcetaiwan
Created June 13, 2022 16:39
Show Gist options
  • Save vincentopensourcetaiwan/267ee83df023150b575531d787191fba to your computer and use it in GitHub Desktop.
Save vincentopensourcetaiwan/267ee83df023150b575531d787191fba to your computer and use it in GitHub Desktop.
Pacman loading animation in one div
<div class='pac-man' />
/* LESS Vars */
@primaryClr: #fed75a; // Adjust this value to change the color
@pacman-zise: 70px;
body {
background: #1d1d1d;
height: 100%;
}
.pac-man {
border-radius: 50%;
margin: 0 auto;
margin-top: 5em;
border-radius: 100em 100em 0 0;
background: #f00;
transform-origin: bottom;
animation: eating-top .5s infinite;
&, &::before {
width: @pacman-zise;
height: calc(@pacman-zise/2);
background: @primaryClr;
}
&::before {
content: '';
display: block;
margin-top: calc(@pacman-zise/2);
position: absolute;
transform-origin: top;
border-radius: 0 0 100em 100em;
transform: rotate(80deg);
animation: eating-bottom .5s infinite;
}
&::after {
position: absolute;
border-radius: 100em;
content: '';
display: block;
height: 20px;
width: 20px;
margin-top: calc((@pacman-zise / 2) - 10px);
margin-left: calc((@pacman-zise / 2) - 10px);
transform-origin: center;
animation:
center .5s infinite,
ball .5s -.33s infinite linear;
}
}
@keyframes eating-top{
0%{ transform: rotate(-40deg); }
50% { transform: rotate(0deg); }
100%{ transform: rotate(-40deg); }
}
@keyframes eating-bottom{
0%{ transform: rotate(80deg); }
50% { transform: rotate(0deg); }
100%{ transform: rotate(80deg); }
}
@keyframes center{
0%{ transform: rotate(40deg); }
50% { transform: rotate(0deg); }
100%{ transform: rotate(40deg); }
}
@keyframes ball{
0%{
opacity: .7;
box-shadow:
70px 0 0 0 @primaryClr,
120px 0 0 0 @primaryClr,
170px 0 0 0 @primaryClr,
220px 0 0 0 @primaryClr
;
}
100% {
box-shadow:
20px 0 0 0 @primaryClr,
70px 0 0 0 @primaryClr,
120px 0 0 0 @primaryClr,
170px 0 0 0 @primaryClr
;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment