当前位置：首页 > CSS

css制作表情

2026-01-28 02:20:29CSS

使用CSS制作表情的方法

通过CSS的伪元素、边框、圆角等属性可以快速创建简单的表情符号。以下是几种常见表情的实现方式：

笑脸表情

.smiley {
  width: 100px;
  height: 100px;
  background: yellow;
  border-radius: 50%;
  position: relative;
}

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

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

.smiley .mouth {
  position: absolute;
  width: 40px;
  height: 20px;
  border-bottom: 4px solid black;
  border-radius: 0 0 50% 50%;
  bottom: 25px;
  left: 30px;
}

哭脸表情

.cry {
  width: 100px;
  height: 100px;
  background: lightblue;
  border-radius: 50%;
  position: relative;
}

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

.cry::before { left: 20px; }
.cry::after { right: 20px; }

.cry .mouth {
  position: absolute;
  width: 40px;
  height: 20px;
  border-top: 4px solid black;
  border-radius: 50% 50% 0 0;
  bottom: 25px;
  left: 30px;
}

爱心表情

.heart {
  width: 100px;
  height: 90px;
  position: relative;
}

.heart::before, .heart::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 80px;
  background: red;
  border-radius: 50px 50px 0 0;
}

.heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

动画表情实现

通过CSS动画可以让表情更生动：

@keyframes wink {
  0% { height: 20px; }
  50% { height: 5px; }
  100% { height: 20px; }
}

.winking-eye {
  animation: wink 1s infinite;
}

使用CSS变量定制表情

通过CSS变量可以方便地调整表情属性：

css制作表情

.emoji {
  --emoji-size: 100px;
  --emoji-color: yellow;
  --eye-color: black;
  width: var(--emoji-size);
  height: var(--emoji-size);
  background: var(--emoji-color);
  border-radius: 50%;
}

这些方法展示了如何用纯CSS创建各种表情符号，通过调整尺寸、颜色和形状可以衍生出更多表情变化。