HTML5实现眼睛移动效果的示例

需求描述

在网页中实现眼球随着鼠标移动而移动的特效。

实现思路

1. 在HTML文件中定义两个圆形div，分别表示眼白和瞳孔。利用CSS设置它们的大小、颜色、位置等属性。

		<div class="eye">
			<div class="eyeball"></div>
			<div class="pupil"></div>
		</div>
	

		.eye {
		  	position: relative;
		  	height: 60px;
			width: 60px;
			border-radius: 50%;
			background-color: #fff;
		}

		.eyeball {
		  	border-radius: 50%;
		  	position: absolute;
		  	height: 30px;
		  	width: 30px;
		  	top: 15px;
		  	left: 15px;
		  	background-color: #0a0a0a;
		}

		.pupil {
		  	border-radius: 50%;
		  	position: absolute;
		  	height: 15px;
		  	width: 15px;
		  	top: 22.5px;
		  	left: 22.5px;
		  	background-color: #fff;
		}
	

2. 利用JavaScript监听鼠标移动事件，并分析鼠标移动的方向。通过计算鼠标位置相对于眼球中心的距离和夹角，调整瞳孔的位置。

		var eye=document.querySelector('.eye');
		var pupil=document.querySelector('.pupil');
		var centerX=eye.getBoundingClientRect().left + eye.offsetWidth / 2;
		var centerY=eye.getBoundingClientRect().top + eye.offsetHeight / 2;

		document.addEventListener('mousemove', function(e) {
		  	var mouseX=e.clientX;
		  	var mouseY=e.clientY;

		  	var deltaX=mouseX - centerX;
		  	var deltaY=mouseY - centerY;
		  	var angle=Math.atan2(deltaY, deltaX);

		  	var radius=eye.offsetWidth / 2 - pupil.offsetWidth / 2;
		  	var newX=radius * Math.cos(angle);
		  	var newY=radius * Math.sin(angle);

		  	pupil.style.transform='translate(' + newX + 'px, ' + newY + 'px)';
		});
	

代码解释

代码中通过querySelector方法获取到眼球和瞳孔的元素，从而进行其属性和样式的操作。监听mousemove事件实时获取鼠标的当前位置，再根据鼠标位置计算瞳孔的位置，通过改变瞳孔的transform属性实时更新眼球的位置。

总结

通过CSS和JavaScript的配合，我们可以很容易实现网页特效。通过上述实现代码来观察如何分别运用CSS和JavaScript来实现眼睛移动的效果，通过CSS来进行样式等属性的设置，然后通过JavaScript的监听鼠标事件，来对鼠标位置进行监控计算和更新，得以实时展现出特效。