当前位置：首页 > CSS

css制作笑脸

2026-04-01 05:48:15CSS

使用CSS制作笑脸

使用CSS的border-radius和transform属性可以轻松绘制一个简单的笑脸。以下是一个完整的实现方法：

HTML结构

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

CSS样式

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

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

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

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

制作动画笑脸

为笑脸添加简单的动画效果，使其更生动：

.mouth {
  /* 原有样式 */
  transition: all 0.3s ease;
}

.smiley:hover .mouth {
  height: 30px;
  border-radius: 50px 50px 0 0;
  border-bottom: none;
  border-top: 5px solid #000;
}

使用伪元素简化结构

可以通过伪元素减少HTML标记：

<div class="smiley"></div>

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

.smiley::before { left: 50px; }
.smiley::after { right: 50px; }

响应式笑脸

添加媒体查询使笑脸适应不同屏幕尺寸：

css制作笑脸

@media (max-width: 600px) {
  .smiley {
    width: 150px;
    height: 150px;
  }

  .eye {
    width: 20px;
    height: 30px;
    top: 40px;
  }

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

  .mouth {
    width: 80px;
    bottom: 30px;
  }
}