当前位置：首页 > CSS

css制作emoji

2026-01-28 10:42:43CSS

使用 CSS 制作 Emoji

CSS 可以通过伪元素、字体图标或纯 CSS 绘制来实现 Emoji 效果。以下是几种常见方法：

使用 Unicode 或系统 Emoji

直接通过 HTML 插入 Unicode 字符或系统原生 Emoji，再用 CSS 控制样式：

css制作emoji

<span class="emoji">😊</span>

.emoji {
  font-size: 2rem;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

使用自定义字体图标

通过字体库（如 Font Awesome）加载 Emoji 风格的图标：

css制作emoji

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i class="far fa-smile emoji"></i>

.emoji {
  color: #FFD700;
  font-size: 3rem;
}

纯 CSS 绘制 Emoji

用 CSS 绘制简单的 Emoji（如笑脸）：

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

.emoji-face {
  width: 100px;
  height: 100px;
  background: #FFD700;
  border-radius: 50%;
  position: relative;
}
.emoji-face::before,
.emoji-face::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 30px;
  background: #333;
  border-radius: 50%;
  top: 30px;
}
.emoji-face::before { left: 20px; }
.emoji-face::after { right: 20px; }
.emoji-face::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 20px;
  background: transparent;
  border-bottom: 4px solid #333;
  border-radius: 0 0 50% 50%;
  top: 50px;
  left: 20px;
}

使用 CSS 动画增强效果

为 Emoji 添加动画（如跳动效果）：

.emoji {
  animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}