Pac-Man Animation

HTML
<div class="wrapper"> <div class="wrapper-inner"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <div class="text-line"> <h1 class="p"> P <div class="pac-man"> <div class="eye"></div> </div> </h1> <div class="awesome"> <div class="awesome-board"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="ghost"> <div class="eye"></div> <div class="eye"></div> </div> <div class="pac-man"> <div class="eye"></div> </div> </div> </div> <h1 class="c"> c <div class="pac-man"> <div class="eye"></div> </div> </h1> </div> <h1 class="dash">-</h1> <div class="text-line"> <h1 class="m"> M <div class="ghost ghost-2"> <div class="eye"></div> <div class="eye"></div> </div> </h1> <div class="awesome"> <div class="awesome-board"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="ghost"> <div class="eye"></div> <div class="eye"></div> </div> <div class="pac-man"> <div class="eye"></div> </div> </div> </div> <h1 class="n"> n <div class="ghost ghost-2"> <div class="eye"></div> <div class="eye"></div> </div> </h1> </div> </div>
SCSS
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:700'); *, *::before, *::after { box-sizing: border-box; } $size: 25vmin; $bg-color: #46bfee; body { height: 100vh; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; font-family: 'IBM Plex Mono', monospace; background: $bg-color; animation: change-bg 8s infinite; } .wrapper { display: flex; position:relative; flex-wrap: wrap; &-inner { position:absolute; width: 100%; height: 100%; top: 0; left: 0; transform: scale(2); & > .dot { transform: scale(2); background: #fff; } } } @keyframes change-bg { 0% {background: $bg-color} 33% {background: #ea82e5} 66% {background: #db851c} } .text-line { display: flex; align-items: center; justify-content: center; } h1 { font-size: 50vmin; line-height: 50vmin; margin: 0 0px; font-weight: bold; letter-spacing: -3vmin; // overflow: hidden; } .dash { width: 10vmin; color: transparent; position: relative; &::after { content: ''; position: absolute; height: 5vmin; width: 10vmin; transform: translate(-50%, -50%); background: #000; top: 60%; left: 30%; } } .awesome { width: $size; height: $size; background: #000; position: relative; right: -2vmin; top: 5vmin; border-radius: 10px; // animation: rotate 8s infinite linear; &::before { content: ''; width: 30%; height: 60%; position: absolute; top: 60%; left: 70%; background: #000; } &::after { content: ''; width: 50%; height: 50%; position: absolute; border-radius: 10px; top: 25%; left: 25%; background: $bg-color; animation: change-bg 8s infinite; } } @keyframes rotate { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } .ghost { width: 25%; height: 25%; background: #d03e19; position: absolute; border-radius: 50% 50% 0 0; animation: move-pac-man linear 8s infinite -6.5s; &::before, &::after { content: ''; position: absolute; border: $size * .06 solid transparent; border-bottom: $size * .06 solid #000; bottom: 0; } &::after { right: 0; } .eye { position: absolute; height: 30%; width: 20%; background: #fff; border-radius: 50% 50% 0 0; top: 20%; left: 30%; &:nth-child(2) { left: 70%; } &::after { content: ''; position: absolute; width: $size * .03; height: $size * .03; background: #000; border-radius: 100%; right: 10%; bottom: 10%; } } } .pac-man { width: $size * .25; height: $size * .25; position: absolute; transform-origin: center center; animation: move-pac-man linear 8s infinite; @keyframes move-pac-man { 0% {transform: translate(0,0)} 24% {transform: translate($size * .75,0)} 26% {transform: translate($size * .75,0) rotate(90deg)} 49% {transform: translate($size * .75,$size * .75) rotate(90deg)} 51% {transform: translate($size * .75,$size * .75) rotate(180deg)} 74% {transform: translate(0vmin,$size * .75) rotate(180deg)} 76% {transform: translate(0vmin,$size * .75) rotate(270deg)} 98% {transform: translate(0vmin,0vmin) rotate(270deg)} 100% {transform: translate(0vmin,0vmin) rotate(360deg)} } .eye { width: 20%; height: 20%; border-radius: 100%; background: #fff; position: absolute; top: 20%; left: 30%; z-index: 1; &::after { content: ''; width: 50%; height: 50%; border-radius: 100%; background: #000; position: absolute; transform: translate(-50%, -50%); left: 75%; top: 75%; } } &::before, &::after { content: ''; background: #fdff00; width: 100%; height: 50%; position: absolute; } &::before { border-radius: 0 0 $size * .5 $size * .5; top: 50%; transform-origin: center top; animation: chomp .25s infinite; } @keyframes chomp { 0%, 100% {transform: rotate(2deg)} 50% {transform: rotate(30deg)} } &::after { border-radius: $size * .5 $size * .5 0 0; transform-origin: center bottom; animation: chomp-2 .25s infinite; } @keyframes chomp-2 { 0%, 100% {transform: rotate(-2deg)} 50% {transform: rotate(-30deg)} } } .dot { width: $size * .03; height: $size * .03; background: #db851c; position: absolute; border-radius: 100%; transform: translate(-50%, -50%); top: 12.5%; left: 15%; animation: eat-dot 8s infinite -.2s; &:nth-of-type(2) { left: 40%; animation: eat-dot 8s infinite .5s; } &:nth-of-type(3) { left: 62.5%; animation: eat-dot 8s infinite 1s; } &:nth-of-type(4) { left: 85%; animation: eat-dot 8s infinite 1.5s; } &:nth-of-type(5) { left: 85%; top: 40%; animation: eat-dot 8s infinite 2.5s; } &:nth-of-type(6) { left: 85%; top: 62.5%; animation: eat-dot 8s infinite 3s; } &:nth-of-type(7) { left: 85%; top: 85%; animation: eat-dot 8s infinite 3.5s; } &:nth-of-type(8) { left: 62.5%; top: 85%; animation: eat-dot 8s infinite 4.3s; } &:nth-of-type(9) { left: 40%; top: 85%; animation: eat-dot 8s infinite 5s; } &:nth-of-type(10) { left: 15%; top: 85%; animation: eat-dot 8s infinite 5.5s; } &:nth-of-type(11) { left: 15%; top: 62.5%; animation: eat-dot 8s infinite 6.3s; } &:nth-of-type(12) { left: 15%; top: 40%; animation: eat-dot 8s infinite 6.9s; } @keyframes eat-dot { 0% {opacity: 1} 3% {opacity: 0} 30% {opacity: 0} 100% {opacity: 1} } } .p { position: relative; .pac-man { animation: pac-man-p 8s linear infinite; top: 18%; left: 16%; } @keyframes pac-man-p { 0%, 100%{transform:translate(0,0) rotate(90deg)} 48%{transform:translate(0,27vmin) rotate(90deg)} 52%{transform:translate(0,27vmin) rotate(-90deg)} 98%{transform:translate(0,0vmin) rotate(-90deg)} } } .c { position: relative; .pac-man { animation: none; transform: scale(1.5); top: 56%; left: 51%; } } .ghost-2 { width: 30%; height: 20%; &::before, &::after { content: ''; position: absolute; border: $size * .06 solid transparent; border-top: $size * .06 solid #d03e19; top: 100%; } &::after { right: 0%; } } .m { position: relative; .ghost { animation: none; top: 68%; left: 40%; animation: bounce-ghost 3s infinite; } } @keyframes bounce-ghost { 0% { transform: translate(0,0); } 50% { transform: translate(0,-50%); } } .n { position: relative; .ghost { animation: none; top: 58%; left: 41%; animation: bounce-ghost 3s infinite; } }
JAVASCRIPT
Expand for more options Login