css制作圆脸表情

使用CSS制作圆脸表情

通过CSS的border-radius属性可以轻松创建圆形基础，再结合其他属性添加眼睛、嘴巴等元素。

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

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

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

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

.mouth {
  width: 80px;
  height: 20px;
  background-color: #000;
  border-radius: 0 0 40px 40px;
  position: absolute;
  bottom: 50px;
  left: 60px;
}

添加表情动画效果

通过CSS动画让表情动态变化，例如眨眼或微笑。

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

.eye {
  animation: blink 3s infinite;
}

@keyframes smile {
  0% { border-radius: 0 0 40px 40px; height: 20px; }
  100% { border-radius: 50%; height: 40px; }
}

.mouth:hover {
  animation: smile 0.5s forwards;
}

使用伪元素简化结构

通过::before和::after伪元素减少HTML标签数量。

<div class="face"></div>

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

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

创建复杂表情变化

结合CSS变量和JavaScript实现表情切换。

document.querySelector('.face').addEventListener('click', function() {
  this.style.setProperty('--mouth-shape', '50%');
});

.face {
  --mouth-shape: 0 0 40px 40px;
}

.mouth {
  border-radius: var(--mouth-shape);
}

响应式表情设计

使用vw单位确保表情在不同屏幕尺寸下的比例。

.face {
  width: 20vw;
  height: 20vw;
}

.eye {
  width: 3vw;
  height: 3vw;
  top: 5vw;
}

.left { left: 5vw; }
.right { right: 5vw; }