css制作聊天

使用CSS制作聊天界面

HTML结构

<div class="chat-container">
  <div class="chat-messages">
    <div class="message received">
      <p>你好！最近怎么样？</p>
    </div>
    <div class="message sent">
      <p>我很好，谢谢关心！</p>
    </div>
  </div>
  <div class="chat-input">
    <input type="text" placeholder="输入消息...">
    <button>发送</button>
  </div>
</div>

基础样式

.chat-container {
  width: 400px;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.message {
  max-width: 70%;
  margin-bottom: 15px;
  padding: 10px 15px;
  border-radius: 18px;
  line-height: 1.4;
}

.message.received {
  background-color: #fff;
  border-top-left-radius: 0;
  align-self: flex-start;
}

.message.sent {
  background-color: #0084ff;
  color: white;
  border-top-right-radius: 0;
  align-self: flex-end;
}

.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #fff;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

.chat-input button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #0084ff;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

高级样式技巧

气泡箭头效果

.message.received {
  position: relative;
}

.message.received::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}

.message.sent {
  position: relative;
}

.message.sent::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 0;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left-color: #0084ff;
  border-right: 0;
}

时间戳样式

<div class="message received">
  <p>你好！最近怎么样？</p>
  <span class="timestamp">10:30 AM</span>
</div>

.timestamp {
  font-size: 0.75rem;
  color: #999;
  margin-top: 5px;
  display: block;
}

.message.sent .timestamp {
  text-align: right;
  color: rgba(255,255,255,0.7);
}

响应式设计

移动设备适配

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

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

暗黑模式

.dark-mode .chat-container {
  background-color: #2d2d2d;
  border-color: #444;
}

.dark-mode .chat-messages {
  background-color: #1e1e1e;
}

.dark-mode .message.received {
  background-color: #333;
  color: #eee;
}

.dark-mode .message.received::before {
  border-right-color: #333;
}

.dark-mode .chat-input {
  background-color: #252525;
  border-top-color: #444;
}

.dark-mode .chat-input input {
  background-color: #333;
  color: #eee;
  border-color: #444;
}

动画效果

消息入场动画

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

.message {
  animation: fadeIn 0.3s ease-out;
}

.message.received {
  animation-delay: 0.1s;
}

.message.sent {
  animation-delay: 0.2s;
}

发送按钮悬停效果

.chat-input button:hover {
  background-color: #0073e6;
  transform: scale(1.05);
  transition: all 0.2s ease;
}