笑脸眼睛移动动画css

笑脸眼睛移动动画可以通过CSS实现。具体实现步骤如下：

1. 创建一个包含笑脸的div元素，并设置它的大小、颜色等样式。

2. 在div元素中创建两个div元素，分别表示左眼和右眼，并设置它们的大小、颜色等样式。

3. 通过设置左眼和右眼的位置，让它们在div元素中居中显示，并设置它们的位置为相对定位。

4. 通过设置左眼和右眼的伪元素，来实现眼球的移动效果。具体来说，我们可以设置左眼和右眼伪元素的位置和大小，以及背景颜色等属性。

5. 通过设置CSS动画，让眼球伪元素的位置发生变化，从而实现眼球的移动效果。具体来说，我们可以通过@keyframes关键字定义一个动画序列，并通过animation属性将其应用到伪元素上。

下面是一个示例代码，实现了笑脸眼睛移动动画效果：

<div class="face">
  <div class="eye left-eye">
    <div class="pupil"></div>
  </div>
  <div class="eye right-eye">
    <div class="pupil"></div>
  </div>
</div>

.face {
  width: 80px;
  height: 80px;
  background-color: yellow;
  border-radius: 50%;
  position: relative;
}
.eye {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 30%;
}
.left-eye {
  left: 20%;
}
.right-eye {
  right: 20%;
}
.pupil {
  width: 8px;
  height: 8px;
  background-color: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left-eye .pupil {
  animation: moveLeftEye infinite alternate;
}
.right-eye .pupil {
  animation: moveRightEye infinite alternate;
}
@keyframes moveLeftEye {
  from { transform: translate(-50%, -50%); }
  to { transform: translate(-25%, -50%); }
}
@keyframes moveRightEye {
  from { transform: translate(-50%, -50%); }
  to { transform: translate(-75%, -50%); }
}