前面的系列教你怎么搭骨架、填表单、展示数据——这些都让你的页面"能用"。但这篇教你怎么让页面"好看"。VibeHub 有两个相关分类：视觉效果与操作状态（16 个术语）和样式与布局基础（12 个属性）。合在一起就是"让页面好看"的完整词库。
交互状态 4 种：告诉 AI "用户操作时页面怎么反应"
1. 悬停（Hover）
鼠标停在元素上但还没点击的时候。最常见的交互效果。
VibeHub 里的原话："悬停是鼠标指针停在元素上但尚未点击时出现的交互状态。浮起 + 变色。"
喂给 AI 的话："Card 在 Hover 时上移 4px，阴影从浅变深。按钮 Hover 时背景色加深 10%。所有可点击元素 Hover 时 cursor: pointer。过渡时间为 0.2s。" 2. 按下（Active）
鼠标正在按下去的瞬间。给用户"我按到了"的反馈。
VibeHub 里的原话："按下是鼠标或手指正在按住控件时出现的短暂交互状态。真的按下去：左边会下沉，右边没有'按到了'的感觉。"
喂给 AI 的话："按钮 Active 时下沉 1px，颜色再加深 10%，模拟按下去的物理感觉。"
3. 聚焦（Focus）
用键盘 Tab 键选中或鼠标点进输入框的时候。对无障碍很重要。
VibeHub 里的原话："聚焦是当前会接收键盘输入或操作的元素所处的交互状态。左边有描边，右边聚焦了也看不出来。"
喂给 AI 的话："Input 聚焦时显示蓝色描边 outline: 2px solid #4A90D9。不要移除默认的 focus 样式，键盘用户需要看到焦点位置。"
4. 禁用（Disabled）
控件灰掉了，点不了。表单没填完的时候提交按钮就该禁用。
VibeHub 里的原话："禁用是表示控件当前不能执行操作的交互状态。右边是真的 disabled：点不动，悬停看原因。"
喂给 AI 的话："表单未填完时提交按钮为 Disabled 状态：灰色背景、灰色文字、cursor: not-allowed。用户悬停时显示 Tooltip '请先完成所有必填项'。"
动效 3 种：不要只说"加个动画"
过渡（Transition）
从一个状态到另一个状态的平滑变化。最常用，比如 Hover 时颜色渐变。
VibeHub 里的原话："过渡是一种让 CSS 属性从一个状态平滑变化到另一个状态的动效方式。颜色一格一格变过去，而不是瞬间跳变。"
喂给 AI 的话："所有交互变化加 transition: all 0.2s ease。按钮颜色变化 0.15s，卡片上移 0.3s。"
动画（Animation）
用 keyframes
定义多个阶段的变化。比 Transition 复杂，可以做循环、多段变化。 VibeHub 里的原话："动画是一种用 keyframes
定义多个阶段，并控制其播放方式的 CSS 动效。@keyframes 定义节点，浏览器补齐中间。" 喂给 AI 的话："Logo 加载时用 Animation 旋转：0% 旋转 0deg → 100% 旋转 360deg，持续 1s，无限循环，linear 速度。"
缓动（Easing）
控制动画的速度变化。让动画更自然，而不是机械的匀速。
VibeHub 里的原话："缓动是规定动画在持续时间内如何加速和减速的速度曲线。ease-out 入场 / ease-in 退场 / linear 机械。"
喂给 AI 的话："弹窗出现用 ease-out（快到终点时减速），关闭用 ease-in（开始时慢然后加速）。进度条用 linear（匀速）。"
四两拨千斤的动效技巧
弹性（Spring）：冲过目标再弹回来一点。VibeHub："冲过目标线再回来：过冲（overshoot）+ 回弹。" 适合弹窗弹出、列表新增。
喂给 AI 的话："弹窗弹出用弹性动画，阻尼 0.6，刚度 200，产生轻微的 overshoot 回弹效果。"
渐入渐出（Fade In/Out）：改变透明度让内容出现或消失。
喂给 AI 的话："Modal 出现时 opacity 0→1 淡入 0.3s，同时轻微上移 20px→0。关闭时淡出 0.2s。"
视觉效果常用词
字体风格
衬线（Serif）字体带小装饰，显得优雅正式。非衬线（Sans-Serif）字体干净现代。中文场景：宋体≈衬线，黑体≈非衬线。
喂给 AI 的话："标题用衬线字体（优雅正式），正文用非衬线字体（现代干净）。中文标题用思源宋体，正文用系统默认黑体。"
渐变（Gradient）
两种或多种颜色连续过渡。可以线性（从左到右）或径向（从圆心向外）。
喂给 AI 的话："CTA 按钮用线性渐变，从左到右 #667eea → #764ba2。背景用径向渐变，从中心 #fff → #f0f0f0。"
圆角（Border Radius）
圆角大小影响整体气质。VibeHub：直角严肃、小圆角克制、中圆角友好、胶囊活泼。
喂给 AI 的话："Card 中圆角 8px，按钮小圆角 4px，标签胶囊圆角 999px。全站圆角风格统一。"
毛玻璃（Backdrop Blur）
半透明背景加模糊，看起来像毛玻璃。导航栏吸顶时常用。
VibeHub 里的原话："毛玻璃是一种通过模糊元素背后画面，让半透明界面层与背景区分开的视觉效果。backdrop-filter: blur(12px)。"
喂给 AI 的话："导航栏吸顶后背景半透明白色 + backdrop-filter: blur(12px)。Modal 背景用半透明黑色 rgba(0,0,0,0.5)。"
拖拽（Drag）
按住元素拖到另一个位置。
VibeHub 里的原话："拖拽是一种按住元素并移动它的位置或把它放到目标区域的交互方式。"
喂给 AI 的话："列表项可拖拽排序，拖拽时元素半透明，拖到目标位置显示虚线占位符。拖拽结束松手，元素落到新位置。"
光标（Cursor）
鼠标指针的样式提示。不同元素用不同光标告诉用户"这是什么"。
喂给 AI 的话："按钮 pointer，输入框 text，拖拽区域 grab，拖拽中 grabbing，禁用元素 not-allowed。"
选中高亮（Selection）
用户在页面上拖选文字时的颜色。
喂给 AI 的话："页面选中文字时，背景用品牌色 #4A90D9，文字用白色。让选中高亮跟品牌色一致。"
布局基础：12 个 CSS 属性
间距两兄弟
Margin（外边距）：元素之间的距离。VibeHub："外边距是元素边框外的透明空间，用来控制它与周围元素之间的距离。卡片 A 和卡片 B 之间间距 24px。"
Padding（内边距）：元素内容和边框之间的留白。VibeHub："内边距是元素内容与边框之间的留白，用来让文字或图标不紧贴组件边缘。"
喂给 AI 的话："Card 之间 margin: 24px。Card 内部 padding: 16px，让文字不贴边。"
布局两兄弟
Flex（弹性布局）：一维排列。要么横着排，要么竖着排。VibeHub："弹性布局是一种用 Flexbox 沿一条主轴排列和对齐直接子元素的 CSS 布局方式。"
Grid（网格布局）：二维排列。同时控制行和列。VibeHub："网格布局是一种用 CSS Grid 同时定义行和列，再把子元素放入二维格子的布局方式。"
一句话记住：一行或一列排东西用 Flex，多行多列的规矩网格用 Grid。
喂给 AI 的话（Flex）："导航栏用 Flex 水平排列：Logo 左、导航居中、按钮右。align-items: center。子元素间距 gap: 24px。"
喂给 AI 的话（Grid）："产品卡片用 Grid：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))。卡片自动换行，每张最小宽度 280px。"
视觉三件套
圆角（BorderRadius）：直角变圆角。
阴影（Shadow）：给元素加投影制造层级感。VibeHub："阴影是通过 box-shadow 在元素周围绘制投影，用来区分界面层级的 CSS 效果。浅/中/浮起三级。"
透明度（Opacity）：元素变半透明。
喂给 AI 的话："Card 用浅阴影 0 2px 8px rgba(0,0,0,0.08)。Hover 时用中阴影 0 4px 16px rgba(0,0,0,0.12)。禁用状态 opacity: 0.5。"
定位三件套
Z-Index（层级）：谁在上面谁在下面。VibeHub："层级是通过 z-index 控制元素在同一层叠上下文中前后遮盖顺序的 CSS 规则。z: 1 / 2 / 3。"
Sticky（吸顶）：先正常排列，滚到一定位置后固定住。VibeHub："吸顶是一种让元素先按正常位置排列、滚动到指定边界后暂时固定显示的 CSS 定位方式。"
Position（定位）：决定元素的位置参考系。VibeHub："定位是通过 CSS position 和偏移量决定元素是否脱离文档流及其参照位置的布局规则。"
喂给 AI 的话："Modal 遮罩 z-index: 1000，Modal 内容 z-index: 1001。导航栏 position: sticky; top: 0。角标用 position: absolute，父容器必须设 position: relative。"
其他三个
文本截断（Text Truncate）：文字超出时显示省略号。VibeHub："文本截断是一种在有限空间内隐藏超出文字，并用省略号提示内容未显示完整的显示方式。"
居中（Centering）：水平垂直居中。VibeHub："居中是把文字、元素或一组内容在容器的水平、垂直或两条轴上对齐到中间的布局方式。flex / grid / absolute。"
喂给 AI 的话："标题超过一行用省略号截断：text-overflow: ellipsis; white-space: nowrap; overflow: hidden。整个页面水平垂直居中用 Flex：justify-content: center; align-items: center。"
实战：一个好看的 Card
"创建一个产品 Card：
- Card 整体 white 背景，border-radius: 8px
- 浅阴影 0 2px 8px rgba(0,0,0,0.08)
- 标题 18px 加粗，margin-bottom: 8px
- 描述 14px 灰色 #666，text-overflow 两行省略号
- Hover 时上移 4px，阴影加深，transition: all 0.3s ease"
AI 速览
