Animated Eyes Follow Mouse Cursor
Download : Code
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Eyes Follow Mouse Cursor</title>
</head>
<body>
<div class="face">
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
</div>
<script>
document.querySelector('body').addEventListener('mousemove',eyeball);
function eyeball(){
var eye = document.querySelectorAll('.eye');
eye.forEach(function(eye){
let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2);
let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2);
let radian = Math.atan2(event.pageX - x, event.pageY - y);
let rot = (radian * (180 / Math.PI)* - 1) + 0;
eye.style.transform = "rotate("+rot+"deg)";
})
}
</script>
</body>
</html>style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.face{
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background: #ffcd00;
display: flex;
justify-content: center;
align-items: center;
}
.face::before{
content: '';
position: absolute;
top: 180px;
width: 150px;
height: 70px;
background: #b57700;
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
transition: 0.5s;
}
.face:hover::before{
top: 210px;
width: 150px;
height: 20px;
background: #b57700;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.eyes{
position: relative;
top: -40px;
display: flex;
}
.eyes .eye{
position: relative;
width: 80px;
height: 80px;
display: block;
background: #fff;
margin: 0 15px;
border-radius: 50%;
}
.eyes .eye::before{
content: '';
position: absolute;
top: 50%;
left: 25px;
transform: translate(-50%,-50%);
width: 40px;
height: 40px;
background: #333;
border-radius: 50%;
}
Download - Code
No comments:
Post a Comment