CodePen

HTML

            
              <div class="container">
  <div class="ghost left">
    <div class="eye right"></div>
    <div class="eye left"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <input type="checkbox" class="checkghost">
  </div>
  <div class="ghost right">
    <div class="eye right"></div>
    <div class="eye left"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <input type="checkbox" class="checkghost">
  </div>
  <div class="face" ontouchstart="">
     <div class="eyes">
       <div class="eye right"></div>
       <div class="eye left"></div>
       <div class="nose"></div>
       <div class="mouth"></div>
    </div>
  </div>
  <div class="floor">
    <div class="instructions">Two ghosts are hidden in this room. Can you find them?</div>
  </div>
</div>
            
          
!

CSS

            
              body {
  background: black;
}

.container:before {
  content: '';
  z-index: 100;
  position: fixed;
  background: brown;
  left:0;
  height: 100%;
  left: 10%;
  width: 10%;
}

.container:after {
  content: '';
  z-index: 100;
  position: fixed;
  height: 100%;
  background: brown;
  width: 10%;
  right: 10%;
}

.ghost {
  position: fixed;
  width: 80px;
  height: 80px;
  bottom:40%;
  background: white;
  border-radius: 500px;
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

.ghost:hover {
  cursor: pointer;
}

.ghost.left {
  left: 35%;
}

.ghost.right {
  top: 10%;
  right: 23%;
}

.ghost:active {
  opacity: 0.3;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
}

.face {
  position: fixed;
  width: 80px;
  background: blue;
  height: 80px;
  border-radius: 500px;
  left: 48%;
  right: 40%;
  bottom: 40%;
  transition: transform 1s;
  -webkit-transition: -webkit-transform 1s;
  cursor: pointer;
}

.eye {
  width: 20%;
  height: 20%;
  position: absolute;
  top:25%;
  border-radius: 20px;
  background: white;
}

.eye.left {
   left: 20%;
}

.eye.right {
   left: 60%;
}

.nose {
  width: 20%;
  height: 20%;
  position: absolute;
  top: 45%;
  left: 40%;
  border-radius: 20px;
  background: red;
}

.ghost.left:active + .ghost.right + .face {
  transform: translateX(400%) rotate(360deg);
  -webkit-transform: translateX(400%) rotate(360deg);
  -webkit-transition: -webkit-transform 1s;

}

div.ghost.right:active + .face {
  transform: translateX(-500%) rotate(-360deg); 
  -webkit-transform: translateX(-500%) rotate(-360deg);
}

.mouth {
  width: 40%;
  height: 2%;
  position: absolute;
  top: 75%;
  left: 31%;
  background: black;
}

.face:active .mouth {
  transform: scale(0.2, 3);
  -webkit-transform: scale(0.2, 3);
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
}

div.ghost:active + .face .mouth, .ghost.left:active + .ghost.right + .face .mouth{
  transform: scaleY(3);
  -webkit-transform: scaleY(3);
  transition: transform 1s;
  -webkit-transition: -webkit-transform 1s;
}

.eye:after {
  content: '';
  background: black;
  position: absolute;
  top: 25%;
  width: 50%;
  height: 50%;
  border-radius: 200px;
  left: 27%;
  transition: transform 3s;
  -webkit-transition: -webkit-transform 3s;
}

.ghost.left:hover + .ghost.right + .face .eye.right:after {
  transform: translateX(-40%);
  -webkit-transform: translateX(-40%);
  transition: transform 3s;
  -webkit-transition: -webkit-transform 3s;
}

.ghost.left:hover + .ghost.right + .face .eye.left:after {
  transform: translateX(-40%);
  -webkit-transform: translateX(-40%);
  transition: transform 3s;
  -webkit-transition: -webkit-transform 3s;
}

.ghost.right:hover + .face .eye.right:after {
  transform: translate(30%, -50%);
  -webkit-transform: translate(30%, -50%);
  transition: transform 3s;
  -webkit-transition: -webkit-transform 3s;
}

.ghost.right:hover + .face .eye.left:after {
  transform: translate(30%, -50%);
  -webkit-transform: translate(30%, -50%);
  transition: transform 3s;
  -webkit-transition: -webkit-transform 3s;
}

.floor {
  position: absolute;
  bottom: 0;
  left: 20%;
  z-index: 10;
  width: 60%;
  background: brown;
  height: 40%;
}

.instructions {
  margin-left: 30%;
  margin-top: 80px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.score {
  display: hidden;
}

.checkghost {
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
 * What are you looking for? This is a CSS example!
 */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................