css制作聊天

2026-02-27 03:53:46CSS

使用CSS制作聊天界面

聊天界面的CSS设计需要关注布局、气泡样式、交互反馈等细节。以下是实现方法：

基础布局结构

<div class="chat-container">
  <div class="message received">你好！</div>
  <div class="message sent">嗨，最近怎么样？</div>
</div>

核心CSS样式

.chat-container {
  width: 400px;
  height: 500px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow-y: auto;
  padding: 15px;
  background: #f5f5f5;
}

.message {
  max-width: 70%;
  padding: 10px 15px;
  margin-bottom: 12px;
  border-radius: 18px;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
}

.received {
  background: white;
  align-self: flex-start;
  border-bottom-left-radius: 5px;
}

.sent {
  background: #0084ff;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 5px;
}

高级样式优化

添加时间戳和头像

.message::after {
  content: attr(data-time);
  font-size: 0.75rem;
  color: #999;
  position: absolute;
  bottom: -18px;
  white-space: nowrap;
}

.sent::after {
  right: 0;
}

.received::after {
  left: 0;
}

动画效果

.message {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

响应式设计

适应移动设备

@media (max-width: 600px) {
  .chat-container {
    width: 100%;
    height: 100vh;
    border-radius: 0;
  }

  .message {
    max-width: 85%;
  }
}

输入框样式

.chat-input {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background: white;
  border-top: 1px solid #eee;
}

.chat-input input {
  width: calc(100% - 70px);
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

这些样式组合可以创建出美观实用的聊天界面，可根据实际需求调整颜色、间距和动画参数。

css制作聊天