AI 悬浮按钮图标方案预览

方案一：赛博机器人

机器人面部 + 对话气泡融合，天线带能量闪烁，眼睛自动眨眼，科技感与亲和力兼顾

深色背景

浅色背景

🤖 机器人面部 💬 气泡融合 📡 天线能量灯 👁 自动眨眼 ✨ 高光扫过 🌊 呼吸光晕

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
  <defs>
    <linearGradient id="csk-ico-grad" x1="6" y1="8" x2="26" y2="28"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#fff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0.82"/>
    </linearGradient>
  </defs>
  <!-- 对话气泡主体 -->
  <rect x="5" y="8" width="22" height="16" rx="4" fill="url(#csk-ico-grad)"/>
  <path d="M9 24L6 28.5l6-4.5z" fill="url(#csk-ico-grad)"/>
  <!-- 机器人天线 -->
  <line x1="16" y1="8" x2="16" y2="4" stroke="#fff"
    stroke-width="1.5" stroke-linecap="round"/>
  <circle cx="16" cy="3" r="1.5" fill="#fff" class="svg-antenna-glow"/>
  <!-- 机器人眼睛 -->
  <rect x="9.5" y="13" width="4" height="3.5" rx="1.2"
    fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/>
  <rect x="18.5" y="13" width="4" height="3.5" rx="1.2"
    fill="rgba(99,102,241,0.55)" class="svg-eye-blink"/>
  <!-- 眼睛高光 -->
  <circle cx="11" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/>
  <circle cx="20" cy="14.2" r="0.7" fill="#fff" opacity="0.9"/>
  <!-- 微笑嘴巴 -->
  <path d="M12.5 20 Q16 22.5 19.5 20" stroke="rgba(99,102,241,0.4)"
    stroke-width="1.2" fill="none" stroke-linecap="round"/>
</svg>

方案二：脉冲星环

AI 机器人居中，双层脉冲环向外扩散，模拟信号发射，科技感最强

深色背景

浅色背景

🤖 完整机器人 📡 双脉冲环 👂 耳部装饰 💬 对话指示点 🔵 青蓝配色 👁 眨眼动效

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
  <defs>
    <linearGradient id="csk-ico-grad" x1="8" y1="6" x2="24" y2="26"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#fff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0.85"/>
    </linearGradient>
  </defs>
  <!-- 机器人头部 -->
  <rect x="8" y="9" width="16" height="14" rx="3.5" fill="url(#csk-ico-grad)"/>
  <!-- 天线 -->
  <line x1="16" y1="9" x2="16" y2="4.5" stroke="#fff"
    stroke-width="1.8" stroke-linecap="round"/>
  <circle cx="16" cy="3.5" r="1.8" fill="#fff" class="svg-antenna-glow"/>
  <!-- 耳朵 -->
  <rect x="5.5" y="13" width="2.5" height="6" rx="1.2"
    fill="#fff" opacity="0.7"/>
  <rect x="24" y="13" width="2.5" height="6" rx="1.2"
    fill="#fff" opacity="0.7"/>
  <!-- 眼睛 -->
  <circle cx="12" cy="15" r="2.2"
    fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/>
  <circle cx="20" cy="15" r="2.2"
    fill="rgba(14,165,233,0.5)" class="svg-eye-blink"/>
  <circle cx="12.4" cy="14.5" r="0.9" fill="#fff"/>
  <circle cx="20.4" cy="14.5" r="0.9" fill="#fff"/>
  <!-- 嘴巴 -->
  <line x1="12" y1="20" x2="20" y2="20"
    stroke="rgba(14,165,233,0.35)" stroke-width="1" stroke-linecap="round"/>
  <line x1="13" y1="21.5" x2="19" y2="21.5"
    stroke="rgba(14,165,233,0.25)" stroke-width="0.8" stroke-linecap="round"/>
  <!-- 对话指示点 -->
  <circle cx="13" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-1"/>
  <circle cx="16" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-2"/>
  <circle cx="19" cy="27" r="1" fill="#fff" opacity="0.5" class="svg-float-3"/>
</svg>

方案三：全息菱形

菱形科技边框包裹机器人面孔，扫描线动效，玫红渐变配色极具视觉冲击力

深色背景

浅色背景

💎 六边形边框 🤖 机器人面孔 📡 扫描线 🔴 玫红渐变 ✨ 高光扫过 📊 数据流动画

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
  <defs>
    <linearGradient id="csk-ico-grad" x1="4" y1="4" x2="28" y2="28"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0.65"/>
    </linearGradient>
  </defs>
  <!-- 六边形科技框 -->
  <path d="M16 2L28 9v14l-12 7L4 23V9z"
    stroke="url(#csk-ico-grad)" stroke-width="1.8"
    fill="none" stroke-linejoin="round"/>
  <path d="M16 5L25 10.5v11L16 27l-9-5.5v-11z"
    fill="url(#csk-ico-grad)" opacity="0.15"/>
  <!-- 机器人面部 -->
  <rect x="10" y="10" width="12" height="11" rx="2.5"
    fill="url(#csk-ico-grad)"/>
  <!-- 天线 -->
  <line x1="16" y1="10" x2="16" y2="6.5" stroke="#fff"
    stroke-width="1.5" stroke-linecap="round"/>
  <circle cx="16" cy="5.5" r="1.3" fill="#fff" class="svg-antenna-glow"/>
  <!-- LED 眼睛 -->
  <rect x="12" y="13.5" width="3" height="1.8" rx="0.9"
    fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/>
  <rect x="17" y="13.5" width="3" height="1.8" rx="0.9"
    fill="rgba(244,63,94,0.55)" class="svg-eye-blink"/>
  <!-- 扫描线 -->
  <rect x="10" y="15.5" width="12" height="0.6" rx="0.3"
    fill="#fff" opacity="0.2" class="svg-scan-line"/>
  <!-- 数据流嘴巴 -->
  <line x1="12.5" y1="18.5" x2="19.5" y2="18.5"
    stroke="rgba(244,63,94,0.3)" stroke-width="0.8"
    stroke-dasharray="1.5 1" class="svg-data-flow" stroke-linecap="round"/>
</svg>

方案四：矩阵幽光

极简机器人面孔 + 旋转能量环，翡翠绿配色，科技感与优雅并存

深色背景

浅色背景

🤖 大眼机器人 💬 气泡造型 🔄 旋转能量环 📡 侧面信号波 🟢 翡翠绿 🌊 呼吸光晕

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
  <defs>
    <linearGradient id="csk-ico-grad" x1="8" y1="6" x2="24" y2="26"
      gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#fff" stop-opacity="1"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0.8"/>
    </linearGradient>
  </defs>
  <!-- 对话气泡 -->
  <rect x="6" y="7" width="20" height="16" rx="4.5" fill="url(#csk-ico-grad)"/>
  <path d="M10 23L7.5 27.5l5.5-4.5z" fill="url(#csk-ico-grad)"/>
  <!-- 天线 -->
  <line x1="16" y1="7" x2="16" y2="3" stroke="#fff"
    stroke-width="1.5" stroke-linecap="round"/>
  <circle cx="16" cy="2.5" r="1.2" fill="#fff" class="svg-antenna-glow"/>
  <!-- 左眼 -->
  <circle cx="12" cy="14" r="2.8" fill="rgba(16,185,129,0.2)"
    stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/>
  <circle cx="12" cy="14" r="1.3"
    fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/>
  <circle cx="11.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/>
  <!-- 右眼 -->
  <circle cx="20" cy="14" r="2.8" fill="rgba(16,185,129,0.2)"
    stroke="rgba(16,185,129,0.5)" stroke-width="0.8"/>
  <circle cx="20" cy="14" r="1.3"
    fill="rgba(16,185,129,0.6)" class="svg-eye-blink"/>
  <circle cx="19.5" cy="13.3" r="0.6" fill="#fff" opacity="0.9"/>
  <!-- 微笑 -->
  <path d="M13 19.5 Q16 21.5 19 19.5"
    stroke="rgba(16,185,129,0.4)" stroke-width="1"
    fill="none" stroke-linecap="round"/>
  <!-- 信号波 -->
  <path d="M3 12 Q1.5 15 3 18" stroke="#fff"
    stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/>
  <path d="M29 12 Q30.5 15 29 18" stroke="#fff"
    stroke-width="0.8" fill="none" opacity="0.3" stroke-linecap="round"/>
</svg>

🎬 CSS 动画关键帧速查

以下是所有方案共用的 CSS 动画，已包含在 styles.ts 中，SVG 内部的 class 动画需额外添加

/* ===== 按钮外圈动效（已存在于 styles.ts） ===== */

/* 高光扫过 */
@keyframes csk-shimmer {
  0%, 100% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  60% { opacity: 1; }
  80% { left: 120%; opacity: 0; }
}

/* 呼吸光晕 */
@keyframes csk-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.35; }
}

/* 脉冲扩散环（方案二专用） */
@keyframes csk-pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* 旋转能量环（方案四专用） */
@keyframes csk-rotate-ring {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== SVG 内部动效（需新增到 styles.ts） ===== */

/* 眨眼 */
@keyframes csk-eye-blink {
  0%, 42%, 48%, 100% { opacity: 1; }
  45% { opacity: 0.1; }
}

/* 天线能量闪烁 */
@keyframes csk-antenna-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 扫描线 */
@keyframes csk-scan-line {
  0% { transform: translateY(-8px); opacity: 0; }
  20% { opacity: 0.6; }
  80% { opacity: 0.6; }
  100% { transform: translateY(8px); opacity: 0; }
}

/* 数据流（虚线移动） */
@keyframes csk-data-flow {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

/* 浮动圆点 */
@keyframes csk-float-dot {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-2px); opacity: 1; }
}

/* SVG class 绑定 */
.csk-launcher .svg-eye-blink {
  animation: csk-eye-blink 4s ease-in-out infinite;
}
.csk-launcher .svg-antenna-glow {
  animation: csk-antenna-glow 2s ease-in-out infinite;
}
.csk-launcher .svg-scan-line {
  animation: csk-scan-line 3s ease-in-out infinite;
}
.csk-launcher .svg-data-flow {
  animation: csk-data-flow 2s linear infinite;
}
.csk-launcher .svg-float-1 {
  animation: csk-float-dot 2s ease-in-out infinite;
}
.csk-launcher .svg-float-2 {
  animation: csk-float-dot 2s ease-in-out 0.3s infinite;
}
.csk-launcher .svg-float-3 {
  animation: csk-float-dot 2s ease-in-out 0.6s infinite;
}

方案	科技强度	亲和力	辨识度	动效丰富度	适用场景
⭐ 方案一：赛博机器人	★★★☆☆	★★★★★	★★★★☆	★★★★☆	通用客服、电商
方案二：脉冲星环	★★★★★	★★★☆☆	★★★★★	★★★★★	技术产品、SaaS
方案三：全息菱形	★★★★★	★★★☆☆	★★★★★	★★★★☆	潮流品牌、游戏
方案四：矩阵幽光	★★★★☆	★★★★☆	★★★★☆	★★★★★	健康医疗、教育

🤖 AI 悬浮按钮图标方案

方案一：赛博机器人

方案二：脉冲星环

方案三：全息菱形

方案四：矩阵幽光

🎬 CSS 动画关键帧速查

📊 方案对比