Skip to content

Instantly share code, notes, and snippets.

@samcyn

samcyn/eye.html

Created November 3, 2017 13:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save samcyn/01419e2b01d4c8a5c235f65058b094cc to your computer and use it in GitHub Desktop.
Save samcyn/01419e2b01d4c8a5c235f65058b094cc to your computer and use it in GitHub Desktop.
Download ZIP
Eye animation. 3rd day 30 days challenge.
Raw
eye.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
img{
width: 250px;
height: auto;
}
.holder{
position: relative;
}
/* .eye__lid{
width: 117px;
height: 48px;
border: 1px solid #000;
position: absolute;
top: 67px;
left: 52px;
right: 0;
bottom: 0;
border-top-left-radius: 86%;
border-bottom-left-radius: 17%;
border-top-right-radius: 17%;
border-bottom-right-radius: 86%;
transform: rotate(12deg);
overflow: hidden;
z-index: 1000;
}
.eye__wall{
width: 117px;
height: 48px;
border: 1px solid #000;
position: absolute;
top: 67px;
left: 52px;
right: 0;
bottom: 0;
border-top-left-radius: 86%;
border-bottom-left-radius: 17%;
border-top-right-radius: 17%;
border-bottom-right-radius: 86%;
transform: rotate(12deg);
overflow: hidden;
}
.eye__lid:after,
.eye__lid:before
{
content: '';
display: block;
background: red;
transition: all 1s ease;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.eye__ball{
height: 50px;
width: 50px;
position: absolute;
left: 46%;
margin-left: -25px;
top: 30%;
margin-top: -25px;
background: #222;
border-radius: 50%;
}
.eye__container{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.eye__overlay{
height: 400px;
width: 400px;
background: brown;
} */
.eye__lash{
width: 63px;
height: 63px;
border: solid 2px #000;
border-radius: 75% 15%;
position: absolute;
transform: rotate(45deg);
display: flex;
justify-content: center;
align-items: center;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.eye__lash-two{
width: 60px;
height: 60px;
border: solid 1px #000;
border-radius: 75% 15%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.eye__overlay{
width: 45px;
height: 45px;
border: solid 1px #000;
border-radius: 75% 15%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.eye__container{
width: 40px;
height: 40px;
border: solid 1px #000;
border-radius: 75% 15%;
position: absolute;
overflow: hidden;
z-index: 100;
}
.eye__container:before{
content: '';
display: block;
background: #000;
transition: all 1s ease;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
transform: rotate(134deg) translateY(108px);
animation: up 1s ease infinite;
}
.eye__container:after{
content: '';
display: block;
background: #000;
transition: all 1s ease;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
transform: rotate(134deg) translateY(-24px);
animation: down 1s ease infinite;
}
.eye__lid{
width: 38px;
height: 38px;
border: solid 1px #000;
border-radius: 75% 15%;
position: absolute;
}
.eye__oval {
width: 35px;
height: 35px;
border: solid 1px #000;
border-radius: 75% 15%;
position: relative;
-webkit-box-shadow: inset -2px 14px 49px -32px rgba(34,34,34,1);
-moz-box-shadow: inset -2px 14px 49px -32px rgba(34,34,34,1);
box-shadow: inset -2px 14px 49px -32px rgba(34,34,34,1);
}
.eye__wall:before {
content: '';
display: block;
position: absolute;
width: 25px;
height: 25px;
border: solid 1px #000;
border-radius: 50%;
left: 3px;
top: 3px;
-webkit-box-shadow: inset 0px 3px 160px 64px rgba(146,158,96,1);
-moz-box-shadow: inset 0px 3px 160px 64px rgba(146,158,96,1);
box-shadow: inset 0px 3px 160px 64px rgba(146,158,96,1);
}
.eye__ball{
position: absolute;
width: 8px;
height: 8px;
background: #000;
top: 50%;
left: 50%;
margin-top: -5px;
margin-left: -4px;
border-radius: 100%;
}
@keyframes up {
from{
transform: rotate(134deg) translateY(108px);
}
to{
transform: rotate(134deg) translateY(91px);
}
}
@keyframes down {
from{
transform: rotate(134deg) translateY(-24px);
}
to{
transform: rotate(134deg) translateY(-8px);
}
}
</style>
</head>
<body>
<div class="holder">
<!-- <img src="assets/img/eye.png"> -->
<div class="eye__lash">
<div class="eye__lash-two">
<div class="eye__container">
</div>
<div class="eye__lid">
<div class="eye__oval eye__wall">
<div class="eye__ball"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment