cacete

truco

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;
       clip: rect(0px, 50px, 100px, 0px);
       z-index: 2;
     }
     
     .pacman-mouth {
     ...