PacMan

by Cristofer Sousa

HTML

<div class="pacman-holder">
               <div class="pacman-container">
                    <div class="pacman-body"></div>
                    <div class="pacman-mouth"><div class="pacman"></div></div>
               </div>
               <div class="dot"></div>
     
     <div class="pacman-holder moving">
               <div class="pacman-container">
                    <div class="pacman-body"></div>
                    <div class="pacman-mouth"><div class="pacman"></div></div>
               </div>
               <div class="dot"></div>
          </div>

CSS

body{
          background:#222;
          color:#ddd;
          font-family:Exo;
          text-shadow:0 -1px 0 #000;
     }
     h1,h2{

          color:#ff0;
          text-shadow:0 -3px 3px #000;
          font-weight:normal;
     }
     .wrapper{
          max-width:600px;
          padding:0 20px;
          margin:0 auto;
     }
     .pacman-holder{
          position:relative;
          width:200px;
          margin:100px auto;
     }
     .pacman-container {
          display:block;
          width:100px;
          height: 100px;
          -webkit-transform:rotate(45deg);
          -moz-transform:rotate(45deg);
          -o-transform:rotate(45deg);
          transform:rotate(45deg);
          animation: bite 0.5s linear infinite;
          -moz-animation: bite 0.5s linear infinite; 
          -webkit-animation: bite 0.5s linear infinite; 
     }
     .pacman-body {
          background-color: #ff0;
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
     }
     .dot {
          background-color: #fff;
          position: absolute;
          z-index:0;
          top:40px;
          left:200px;
          width: 20px;
          height: 20px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          animation: movedot 0.5s linear infinite;
          -moz-animation: movedot 0.5s linear infinite; 
          -webkit-animation: movedot 0.5s linear infinite;      
          animation-delay:0.2s;
          -moz-animation-delay:0.2s; 
          -webkit-animation-delay:0.2s; 
     }
     .pacman {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
...