要在网页中创建一个跟随光标移动的眼睛效果,可以使用HTML、CSS和JavaScript来实现。

首先,在HTML中创建一个容器,用于包含眼睛元素。可以使用一个div元素,并为其设置一个唯一的id,例如:

html

然后,在CSS中设置容器的样式,使其呈现为一个圆形的框,并在页面上居中。可以使用如下的CSS代码:

css
#eye-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
overflow: hidden;
}

接下来,在JavaScript中创建两个眼睛元素,并将它们添加到容器中。可以使用如下的JavaScript代码:

javascript
// 获取眼睛容器
const eyeContainer = document.getElementById('eye-container');

// 创建左眼元素
const leftEye = document.createElement('div');
leftEye.classList.add('eye');
leftEye.style.left = '50px';

// 创建右眼元素
const rightEye = document.createElement('div');
rightEye.classList.add('eye');
rightEye.style.right = '50px';

// 将眼睛元素添加到容器中
eyeContainer.appendChild(leftEye);
eyeContainer.appendChild(rightEye);

接下来,在CSS中设置眼睛元素的样式。可以使用如下的CSS代码:

css
.eye {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 2px solid black;
border-radius: 50%;
background-color: white;
}

最后,在JavaScript中添加一个事件监听器,以便在鼠标移动时更新眼睛的位置。可以使用如下的JavaScript代码:

javascript
// 监听鼠标移动事件
document.addEventListener('mousemove', function(event) {
// 计算鼠标相对于眼睛容器的位置
const mouseX = event.clientX - eyeContainer.offsetLeft;
const mouseY = event.clientY - eyeContainer.offsetTop;

// 计算眼睛相对于眼睛容器的位置
const eyeX = mouseX / eyeContainer.offsetWidth * 100;
const eyeY = mouseY / eyeContainer.offsetHeight * 100;

// 更新眼睛的位置
leftEye.style.transform = `translate(${eyeX}px, ${eyeY}px)`;
rightEye.style.transform = `translate(${eyeX}px, ${eyeY}px)`;
});

现在,当鼠标在页面上移动时,眼睛将会跟随光标移动。

完整的HTML、CSS和JavaScript代码如下所示:

html

#eye-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
overflow: hidden;
}

.eye {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 2px solid black;
border-radius: 50%;
background-color: white;
}

const eyeContainer = document.getElementById('eye-container');
const leftEye = document.createElement('div');
leftEye.classList.add('eye');
leftEye.style.left = '50px';

const rightEye = document.createElement('div');
rightEye.classList.add('eye');
rightEye.style.right = '50px';

eyeContainer.appendChild(leftEye);
eyeContainer.appendChild(rightEye);

document.addEventListener('mousemove', function(event) {
const mouseX = event.clientX - eyeContainer.offsetLeft;
const mouseY = event.clientY - eyeContainer.offsetTop;

const eyeX = mouseX / eyeContainer.offsetWidth * 100;
const eyeY = mouseY / eyeContainer.offsetHeight * 100;

leftEye.style.transform = `translate(${eyeX}px, ${eyeY}px)`;
rightEye.style.transform = `translate(${eyeX}px, ${eyeY}px)`;
});

将上述代码复制到一个HTML文件中,并在浏览器中打开该文件,即可看到跟随光标移动的眼睛效果。