使用html画出一对会转的眼睛

要在前端开发中使用HTML、CSS和JavaScript来创建一对会转动的眼睛，你可以遵循以下步骤：

HTML结构：首先，使用HTML来定义眼睛的基本结构。
CSS样式：然后，使用CSS来添加样式，使眼睛看起来更真实。
JavaScript动画：最后，使用JavaScript来添加转动动画。

下面是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转的眼睛</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="eye-container">
        <div class="eye" id="eye1">
            <div class="pupil"></div>
        </div>
        <div class="eye" id="eye2">
            <div class="pupil"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.eye-container {
    display: flex;
    justify-content: space-between;
    width: 200px;
}

.eye {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 50%;
    border: 2px solid black;
    overflow: hidden;
}

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

JavaScript (script.js)

const eye1 = document.getElementById('eye1');
const eye2 = document.getElementById('eye2');

let angle1 = 0;
let angle2 = 0;
const speed1 = 0.02;
const speed2 = -0.02; // Negative to make it rotate in the opposite direction

function rotateEyes() {
    angle1 += speed1;
    angle2 += speed2;
    eye1.style.transform = `rotate(${angle1}rad)`;
    eye2.style.transform = `rotate(${angle2}rad)`;
    requestAnimationFrame(rotateEyes); // Loop the animation
}

rotateEyes(); // Start the animation