css制作笑脸

使用CSS绘制笑脸

通过CSS的border-radius和transform属性可以轻松绘制一个简单的笑脸图案。以下是两种常见方法：

方法一：纯CSS绘制基础笑脸

<div class="smiley-face">
  <div class="eyes">
    <div class="eye left"></div>
    <div class="eye right"></div>
  </div>
  <div class="mouth"></div>
</div>

.smiley-face {
  width: 200px;
  height: 200px;
  background: #FFD700;
  border-radius: 50%;
  position: relative;
}

.eye {
  width: 30px;
  height: 40px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  top: 50px;
}

.left { left: 50px; }
.right { right: 50px; }

.mouth {
  width: 100px;
  height: 50px;
  border-bottom: 5px solid #333;
  border-radius: 0 0 50px 50px;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

方法二：使用伪元素优化代码

.face {
  width: 150px;
  height: 150px;
  background: #F9D423;
  border-radius: 50%;
  position: relative;
}

.face::before, .face::after {
  content: '';
  width: 20px;
  height: 30px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  top: 40px;
}

.face::before { left: 35px; }
.face::after { right: 35px; }

.face .smile {
  width: 80px;
  height: 40px;
  border: 3px solid transparent;
  border-bottom: 3px solid #000;
  border-radius: 0 0 50px 50px;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

添加动画效果

为笑脸增加眨眼动画：

@keyframes blink {
  0%, 100% { height: 30px; }
  50% { height: 5px; }
}

.eye {
  animation: blink 3s infinite;
}

响应式调整

通过CSS变量控制大小：

:root {
  --face-size: 10vmin;
}

.face {
  width: var(--face-size);
  height: var(--face-size);
}

这些方法均使用纯CSS实现，无需JavaScript。可根据需要调整颜色、大小和动画参数。更复杂的表情可通过SVG或Canvas实现，但CSS方案在简单场景下具有更好的性能表现。