1. 基础版本的AI软件应用对话气泡组件。
2. 文字头像和对话加载效果。
3. 基于Tailwindcss
基本Base 对话气泡组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Bubbles</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="max-w-2xl mx-auto p-4 space-y-6">
<!-- AI消息 -->
<div class="flex items-start gap-3">
<!-- 头像 -->
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
AI
</div>
<div class="flex flex-col gap-1">
<!-- 用户名 -->
<div class="text-xs text-gray-500">AI助手</div>
<!-- 消息气泡 -->
<div class="bg-white border border-gray-200 rounded-lg p-3 shadow-sm max-w-lg">
<p class="text-gray-800">
你好！我是AI助手，很高兴为您服务。请问有什么我可以帮您的吗？
</p>
</div>
</div>
</div>
<!-- 用户消息 -->
<div class="flex items-start gap-3 justify-end">
<div class="flex flex-col gap-1 items-end">
<!-- 用户名 -->
<div class="text-xs text-gray-500">我</div>
<!-- 消息气泡 -->
<div class="bg-blue-500 rounded-lg p-3 shadow-sm max-w-lg">
<p class="text-white">
你好！我想请教一个问题。
</p>
</div>
</div>
<!-- 头像 -->
<div class="w-8 h-8 rounded-full bg-gray-500 flex items-center justify-center text-white">
我
</div>
</div>
<!-- AI消息带加载状态 -->
<div class="flex items-start gap-3">
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
AI
</div>
<div class="flex flex-col gap-1">
<div class="text-xs text-gray-500">AI助手</div>
<div class="bg-white border border-gray-200 rounded-lg p-3 shadow-sm max-w-lg">
<div class="flex gap-1">
<div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce"></div>
<div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce" style="animation-delay: 0.2s"></div>
<div class="w-2 h-2 rounded-full bg-gray-300 animate-bounce" style="animation-delay: 0.4s"></div>
</div>
</div>
</div>
</div>
</div>
AI对话气泡组件推特风格 social
AI 对话气泡组件手绘风格 sketchy
AI 对话气泡组件复古风格 retro
AI 对话气泡组件现代风格 modern
Copied to clipboard