- Get link
- X
- Other Apps
Source Code:
1) Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Eyes Movement with Mouse Pointer by BK Tutorial</title>
</head>
<body>
<div class="bkt_eyes">
<div class="bkt_eye">
<div class="bkt_ball"></div>
</div>
<div class="bkt_eye">
<div class="bkt_ball"></div>
</div>
</div>
<script>
var balls = document.getElementsByClassName("bkt_ball");
document.onmousemove = function(){
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
for(var i=0;i<2;i++){
balls[i].style.left = x;
balls[i].style.top = y;
balls[i].style.transform = "translate(-"+x+",-"+y+")";
}
}
</script>
</body>
</html>
2) Style.css
body{
background:#000;
padding:0;
margin:0;
}
.bkt_eyes{
width:100%;
top:50%;
text-align:center;
position:absolute;
transform:translateY(-50%);
}
.bkt_eye{
height:100px;
width:200px;
background:#fff;
margin:40px;
border-radius:50%;
overflow:hidden;
display:inline-block;
position:relative;
}
.bkt_ball{
height:80px;
width:80px;
background:#000;
left:50%;
top:50%;
border-radius:50%;
transform:translate(-50%,-50%);
position:absolute;
}
Output:
Comments
Post a Comment
If you any Query and get more information please comment it. Thanks for visit our blog.