🎨 聊天框自定义教程

1 原理：个人专属皮肤

你写的 CSS 只作用在你自己发的消息上——别人和 AI 的消息保持默认样式。系统会自动把你的选择器作用域化：

// 你写的
.msg .bubble { ... }

// 实际生效（自动加 .skin-author，无需你操心）
.msg.skin-author .bubble { ... }

回声洞的消息区由简单的 HTML 结构组成，你的 CSS 会被直接注入到页面里，作用于下面的结构：

// 每条消息的结构
<div class="msg self|other|ai">
  <div class="meta"><span class="nick">昵称</span></div>
  <div class="bubble">消息内容</div>
</div>

2 常用选择器

3 动画制作

CSS 动画通过 @keyframes 定义关键帧，再用 animation 应用。消息出现时会触发气泡的动画：

/* 弹跳出现 */
.msg .bubble{
  animation: pop .4s cubic-bezier(.3,1.7,.6,1);
}
@keyframes pop{
  from{transform:scale(.6);opacity:0}
  to{transform:scale(1);opacity:1}
}

.msg .bubble{
  animation: fly .5s ease;
}
@keyframes fly{
  from{transform:translateY(20px);opacity:0}
  to{transform:none;opacity:1}
}

.msg.self .bubble{
  background: linear-gradient(135deg,#8b5cf6,#ec4899);
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 12px rgba(139,92,246,.5);
}

.msg.ai .bubble{
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow{
  0%,100%{box-shadow:0 0 6px rgba(34,211,238,.3)}
  50%{box-shadow:0 0 20px rgba(34,211,238,.7)}
}

.msg.other .bubble{
  animation: slideL .4s ease;
}
.msg.self .bubble{
  animation: slideR .4s ease;
}
@keyframes slideL{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

4 示例：完整皮肤

/* 全屏渐变背景 + 拟态气泡 */
#chat{
  background: linear-gradient(160deg,#0f0c29,#302b63,#24243e);
}
.msg .bubble{
  border-radius: 14px;
  animation: pop .35s cubic-bezier(.3,1.6,.6,1);
}
.msg.self .bubble{
  background: linear-gradient(135deg,#667eea,#764ba2);
  box-shadow: 0 6px 18px rgba(102,126,234,.4);
}
.msg.other .bubble{
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
}
@keyframes pop{
  from{transform:scale(.8) translateY(8px);opacity:0}
  to{transform:none;opacity:1}
}

5 发布与分享

写完 CSS 后点击「发布到广场」，你的皮肤会存入数据库，其他用户能在「皮肤广场」里看到并使用。点击「应用」则立刻生效（只有你发的消息会用这个皮肤渲染，其他人、AI 的消息不受影响）。注意：

6 更多技巧