效果预览
眼球的移动,是通过获取鼠标在相对于浏览器页面的实时位置,做出的相应位置的改变。
废话不多说先看效果!
接下来看代码部分:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link type="text/css" rel="stylesheet" href="css/css.css">
<body>
<div class="eyes">
<div class="eye">
<div class="ball"></div>
</div>
<div class="eye">
<div class="ball"></div>
</div>
</div>
<script src="js/js.js"></script>
</body>
</html>
css
body{
margin:0;
padding: 0;
background-color: #4B0082;
}
.eyes{
position: absolute;
top:50%;
transform: translateY(-50%);
color: aliceblue;
width:100%;
text-align: center;
}
.eye{
background: white;
height: 120px;
width:240px;
display:inline-block;
margin:40px;
border-radius:50% ;
position: relative;
overflow: hidden;
}
.ball{
background: black;
width:40px;
height:40px;
top:50%;
left:50%;
transform: translate(-50%,-50%);
position: absolute;
border-radius:50%;
border:15px solid #333;
}
javascript
var balls = document.getElementsByClassName("ball");
document.onmousemove = function(){
var x = event.clientX * 100 / window.innerWidth + "%";
var y = event.clientY * 100 / window.innerHeight + "%";
//获取鼠标坐标(x,y)
for(var i=0;i<2;i++){
balls[i].style.left = x;
balls[i].style.top = y;
}
}
小结
有什么比眼球能跟踪还兴奋的事!(在这个百无聊赖的时期里。。。)