Let's start:
Create a new directory and than create two files index.html and emocss.css
We will be adding java-script in the index.html itself.
Here's the source code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>emoticon eye</title>
<link rel="stylesheet" href="emocss.css">
</head>
<body>
<div>
<h1>Don't bring cursor near me please!</h1>
</div>
<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 )+ 270;
eye.style.transform = "rotate("+ rot + "deg)";
})}
</script>
</body>
</html>
emocss.css
.{
margin: 0;
padding:0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#2be0f8e3,#2be0f8e3);
cursor: pointer;
}
.face{
position: relative;
width:300px;
height: 300px;
border-radius: 50%;
background: linear-gradient(rgba( 227, 182, 32, 0.892 ),rgba( 243, 241, 129, 0.892 ));
display: flex;
justify-content: center;
align-items: center;
}
.face::before{
content: '';
position: absolute;
top: 180px;
width: 150px;
height: 70px;
background: linear-gradient(rgba(5, 12, 7, 0.839),rgba(255, 46, 14, 0.747));
border-bottom-left-radius: 70px;
border-bottom-right-radius: 70px;
transition: 0.5s;
}
.face:hover::before{
width: 50%;
height: 50px;
bottom: 10;
background-color: #20184e;
border: 5px light #20184e;
border-radius: 160px 160px 10px 10px;
}
.eyes{
position: relative;
top:-40px;
display:flex
}
.eyes .eye{
position: relative;
width:80px;
height:80px;
display: block;
background: rgba( 233, 231, 230, 0.747 );
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: linear-gradient(rgba( 2, 2, 2, 0.967 ),rgba( 56, 56, 45, 0.967 ));
border-radius: 50%;
}
And that's it run the code and play with the the css to know how the animation works with changes.
Comment on the post if you want proper explanation of the code.
0 Comments