Как заставить глаз следовать за курсором? ⇐ CSS

[Anonymous]

В настоящее время весь глаз следует за курсором мыши, но зрачок не двигается. Я бы хотел, чтобы за мной следили только взгляды.
Я изменил код руководства, которому следовал. Вместо двух глаз один. Вместо кругов для глаз я создал глаз более овальной формы. Вот HTML, CSS и JavaScript, которые у меня есть на данный момент.





ISS Position


document.addEventListener("mousemove", eyeball);
function eyeball() {
const eye = document.querySelector(".eye");
let x = eye.getBoundingClientRect().left + eye.clientWidth / 2;
let y = eye.getBoundingClientRect().top + eye.clientHeight / 2;
let radian = Math.atan2(event.clientX - x, event.clientY - y);
let rot = radian * (180 / Math.PI) * -1 + 270;
eye.style.transform = `rotate(${rot}deg)`;
}



Welcome to the ISS Locater






Latitude

Longitude

Click the link below to see where it is now on a map
Current ISS Location




h1 {
margin-top: 100px;
text-align: center;
color: white;
}
.container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100vh;
}
body {
background-color: black;
}
label {
color: white;
}
h2 {
color: white;
}
.eye-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(45deg);
}
.eye {
width: 50px;
height: 50px;
background-color: white;
border-radius: 80% 10%;
position: relative;
display: block;
}
.eye:before {
content: "";
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


import express from 'express';
import bodyParser from 'body-parser';
import axios from 'axios';

const app = express();
const port = 3000;

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static('public'));

app.get("/", async (req, res) => {
try {
const response = await axios.get("http://api.open-notify.org/iss-now.json");
const result = response;
const lat = result.data.iss_position.latitude;
const lon = result.data.iss_position.longitude;
res.render("index.ejs", { lat: lat, lon: lon });

} catch (error) {
console.error(error.response.data);
res.status(500).send("Failed to fetch random activity.");
}
});

app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});


Подробнее здесь: https://stackoverflow.com/questions/791 ... low-cursor