Creepy Eyes CSS

By Loktar

by Avijit Kumar

HTML

<script src="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div class="parent">
<p>4</p>
<div id="hitarea">
    <div id="a-1" class="hitbox"></div>
    <div id="a-2" class="hitbox"></div>
    <div id="a-3" class="hitbox"></div>
    <div id="a-4" class="hitbox"></div>
    <div id="a-5" class="hitbox"></div>
    <div id="b-1" class="hitbox"></div>
    <div id="b-2" class="hitbox"></div>
    <div id="b-3" class="hitbox"></div>
    <div id="b-4" class="hitbox"></div>
    <div id="b-5" class="hitbox"></div>
    <div id="c-1" class="hitbox"></div>
    <div id="c-2" class="hitbox"></div>
    <div id="c-3" class="hitbox"></div>
    <div id="c-4" class="hitbox"></div>
    <div id="c-5" class="hitbox"></div>
    <div id="d-1" class="hitbox"></div>
    <div id="d-2" class="hitbox"></div>
    <div id="d-3" class="hitbox"></div>
    <div id="d-4" class="hitbox"></div>
    <div id="d-5" class="hitbox"></div>
    <div id="e-1" class="hitbox"></div>
    <div id="e-2" class="hitbox"></div>
    <div id="e-3" class="hitbox"></div>
    <div id="e-4" class="hitbox"></div>
    <div id="e-5" class="hitbox"></div>
    <div class="eye">
      <div class="pupil"></div>
    </div>
    <div class="eye">
      <div class="pupil"></div>
    </div>
    <div class="eyelid"></div>
    <div class="eyelid"></div>
</div>
<p>4</p>
</div>
<div class="take-me-back">
<p>You shouldn't be here</p>
 <a href="#">Take me back</a>
</div>

CSS

body{background:#000;font-family: 'Roboto', sans-serif;}

.take-me-back {
  width: 1000px;
  margin: 0 auto;
  text-align: center;
  /* display: none; */
  margin-top: 100px;
}

.take-me-back p{
  color: #fff;
  font-size: 48px;
  font-weight: 300;
  margin-bottom: 15px;
}

.take-me-back a{
  display:inline-block;
  padding: 10px 50px;
  color: #000;
  font-size: 24px;
  border-radius: 5px;
  background-color: #f7f7f7;
  max-width: 400px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}

.parent {
  text-align: center;
  width: 1000px;
  margin: 0 auto;
  margin-top: 100px;
}
.parent p {
  color: #eee;
    font-size: 25rem;
    display: inline-block;
    height: 470px;
    vertical-align: middle;
    padding-top: 0px;
    width: 250px;
}

#hitarea{
  position: relative;
    width: 400px;
    height: 400px;
    display: inline-block;
    border-radius: 50%;
    border: 5px solid #fff;
    vertical-align: middle;
}

.hitbox{
    width: 100px;
    height: 100px;
    float: left;
    padding-top: 30px;   
}

/* eyes */

.eye{
  position:absolute;
  width:100px;
  height:100px;
  background: #fff;
  border-radius:50px;
  left:25%;
  top: 40%;  
  pointer-events: none;    
}

.eye+.eye{
    left: 55%; 
}

.pupil{
  position:relative;
  width:25px;
  height:25px;
  background:#000;
  border-radius:12px;
  left:50%;
  top:50%;
  margin:-12px 0 0 -12px;
  -webkit-transition: all .5s ease;
}

.eyelid{
    width:150px;
    height: 100px;
    position:absolute;
    left:20%;
    top: 25%;  
    pointer-events: none;
    background: #000;
  -webkit-animation-name:             blink; 
  -webkit-animation-duration:         2s; 
  -webkit-animation-iteration-count:  infinite;
  -webkit-animation-timing-function:  linear;
  -webkit-animation-direction:        alternate;
  -webkit-animation-delay: 2s; 
  -webkit-transition: all .5s ease;
    
}

.eyelid+.eyelid{
    left: 50%; 
}

/* Blinking eyes */
@-webkit-keyframes blink{
  0%{
    top:25%;
  }
...