Lego2012
9/26/2016 - 9:53 PM

Eye Animation: File Not Found

Eye Animation: File Not Found

.eyes
  .eye
    .iris
      .pupil
    .eyeLid
  .eye
    .iris
      .pupil
    .eyeLid
h1
  a href="https://dribbble.com/shots/1551832-404?list=searches&offset=0" ="404 this shot not found. inspired by this shot"
$irisColor: #45C2D0;
$irisShadow:#00B5BC;
$pupilColor:#fff;
$eyeColorOuter: #fff;
$eyeLidShadow:#FDCF04;
$back:#E34B38;
$rad:false;
$eyeLidColor:#F1C417;
$eyeShadow:#F2F2F2;
$shadows:true;
@mixin rad{
  .round &{
    @content
  }
}
body{
  background:$back;
  text-align:center;
}
*{
  transition:transform 0.5s,border-radius 0.5s;
}
.eye{
  box-shadow:inset $eyeShadow 0.5em -0.5em;
  background:#fff;
  display:inline-block;
  margin:3em;
  width:10em;
  position:relative;
  height:10em;
  @include rad{
    border-radius:5em;
  }
  .eyeLid{
    position:absolute;
    top:-1em;

    left:-1em;
    @include rad{
      border-radius:6em 6em 0 0;
    }
    @if($shadows){
      box-shadow:inset $eyeLidShadow 1em 0.5em 0;
    }
    right:-1em;
    bottom:50%;
    background:$eyeLidColor;
  }
  .iris{

    $size:10em / 2;
    @include rad{
      border-radius:$size;
    }
    position:absolute;
    width:$size;
    height:$size;
    top:5em - $size / 2;
    left:5em - $size / 2;
    background:$irisColor;
    .pupil{
      $ps:$size / 3;
      background:$pupilColor;
      width:$ps;
      height:$ps;
      position:absolute;
      top:2.5em - $ps / 2;
      
      left:2.5em - $ps / 2;
      @include rad{
        border-radius:50%;
      }
    }
  }
}
var irisShadow = '#00B5BC';
$.fn.transform = function(x,y){
  this.css({
    transform:'translateX('+x*100+'%) translateY('+y*100+'%)'
  });
  return this;
}
function moveEye(x,y,s){
  s = s || '';
  $(s+'.iris').transform(x*0.45,y*0.45).css({
    'box-shadow':'inset '+irisShadow+' '+x/2+'em '+y/2+'em'
  });
  $(s+'.pupil').transform(x*0.75,y*0.75);
}
$('body').addClass('round').click(function(){
  $(this).toggleClass('round');
});
setInterval(function(){
  var ang = Math.random() * Math.PI;
  var rad = Math.random();
  moveEye(Math.cos(ang)*rad,Math.sin(ang)*rad);
},1000);