css表情制作

CSS表情制作方法

使用CSS制作表情（如笑脸、哭脸等）可以通过纯代码实现矢量图形效果，以下是常见实现方式：

基础圆形表情

.emoji {
  width: 100px;
  height: 100px;
  background-color: #FFD700;
  border-radius: 50%;
  position: relative;
}

添加眼睛

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

.emoji::before { left: 25px; }
.emoji::after { right: 25px; }

制作微笑嘴型

.emoji .mouth {
  position: absolute;
  width: 40px;
  height: 20px;
  border-bottom: 3px solid #000;
  border-radius: 0 0 40px 40px;
  bottom: 25px;
  left: 30px;
}

制作哭脸嘴型

.emoji .mouth.cry {
  border-top: 3px solid #000;
  border-bottom: none;
  border-radius: 40px 40px 0 0;
}

动画效果

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

.emoji:hover::before, 
.emoji:hover::after {
  animation: blink 0.3s linear;
}

进阶技巧

使用box-shadow制作复杂表情

.emoji.heart-eyes::before {
  box-shadow: 
    0 0 0 10px #FF1493,
    30px 0 0 10px #FF1493;
  background: none;
}

CSS变量控制表情

.emoji {
  --emoji-color: #FFD700;
  --eye-color: #000;
  background-color: var(--emoji-color);
}

响应式表情

.emoji {
  width: 10vw;
  height: 10vw;
  min-width: 50px;
  min-height: 50px;
}

实际应用时需将这些CSS类与HTML元素结合：

<div class="emoji">
  <div class="mouth"></div>
</div>

通过调整border-radius、伪元素和变换属性，可以创建各种表情变体。CSS表情的优势在于无需图像资源，可无限缩放且文件体积极小。