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);