使用html画出一对会转的眼睛"```markdown # 使用HTML画出一对会转的眼睛在这个例子中，我们将使用H

"```markdown

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

在这个例子中，我们将使用HTML和CSS创建一对简单的眼睛，并通过CSS动画使它们转动。我们将利用@keyframes来实现眼睛的转动效果。

HTML结构

以下是眼睛的基本HTML结构：

<!DOCTYPE html>
<html lang=\"zh\">
<head>
    <meta charset=\"UTF-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <link rel=\"stylesheet\" href=\"styles.css\">
    <title>会转的眼睛</title>
</head>
<body>
    <div class=\"eyes\">
        <div class=\"eye\">
            <div class=\"pupil\"></div>
        </div>
        <div class=\"eye\">
            <div class=\"pupil\"></div>
        </div>
    </div>
</body>
</html>

CSS样式

接下来，我们为眼睛和瞳孔设置样式，并添加动画效果。

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

.eyes {
    display: flex;
    justify-content: space-around;
    width: 200px;
}

.eye {
    width: 50px;
    height: 50px;
    background-color: white;
    border: 5px solid black;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    animation: blink 5s infinite;
}

.pupil {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: move 1s infinite alternate;
}

@keyframes move {
    0% {
        transform: translate(-50%, -50%) translateX(-10px);
    }
    100% {
        transform: translate(-50%, -50%) translateX(10px);
    }
}

@keyframes blink {
    0%, 20% {
        height: 50px;
    }
    21%, 22% {
        height: 10px;
    }
    23%, 100% {
        height: 50px;
    }
}

效果说明

HTML结构：我们创建了一个包含两个眼睛的div，每只眼睛中有一个瞳孔的div。
CSS样式：
- body设置为flex布局，以便居中显示眼睛。
- eye类定义了眼睛的外观，包括边框、圆角和位置。
- pupil类定义了瞳孔的外观，并使用@keyframes move来实现左右移动的动画。
- @keyframes blink用于创建眨眼效果，通过改变眼睛的高度来模拟眨眼。

通过以上代码，你可以在浏览器中查看到一对简单的会转的眼睛。继续调整动画的时长和效果，以达到更好的视觉体验。