Last active
October 16, 2016 21:29
-
-
Save matfish2/f028c8cae2640e68fbaeab73440b578d to your computer and use it in GitHub Desktop.
Animated Pacman Using Pure CSS (https://jsbin.com/yolufa/edit?html,css,output)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Animated Pacman Using Pure CSS"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>Anmiated Pacman - Pure CSS</title> | |
| <style> | |
| body { | |
| height:100%; | |
| background:white; | |
| } | |
| .center { | |
| display: flex; | |
| justify-content: center; | |
| align-items:center; | |
| } | |
| .circle { | |
| border-radius: 50%; | |
| } | |
| .pacman { | |
| width:100px; | |
| height:100px; | |
| background:blue; | |
| overflow:hidden; | |
| } | |
| .eye { | |
| width:15px; | |
| height:15px; | |
| background:white; | |
| transform: translateX(10px) translateY(-30px) | |
| } | |
| .mouth { | |
| animation:eat 0.3s alternate infinite; | |
| animation-timing-function: linear; | |
| position:absolute; | |
| width:100px; | |
| height:0; | |
| border-top:50px solid transparent; | |
| border-bottom:50px solid transparent; | |
| border-right:100px solid white; | |
| } | |
| @keyframes eat { | |
| from { | |
| border-top:60px solid transparent; | |
| border-bottom:60px solid transparent; | |
| } | |
| to { | |
| border-top:0 solid transparent; | |
| border-bottom:0 solid transparent; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="pacman circle center"> | |
| <div class="eye circle"></div> | |
| <div class="mouth circle"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment