用 CSS @keyframes 实现“会呼吸、发光”的 AI 客服图标：通过 breathe 动画控制缩放（0.98→1.02）与透明度（0.95→1）模拟呼吸感，配合 pulse-glow 和模糊滤镜实现柔和发光，hover 时暂停动画并增强光效与尺寸。

在 H5 页面中实现一个“会呼吸、发光”的 AI 客服图标，核心是用 CSS 关键帧（@keyframes）控制透明度、缩放和阴影变化，模拟呼吸感与柔和发光效果。不需要 JS 就能完成，轻量且兼容主流移动端浏览器。

1. 图标基础结构：用 SVG 或 PNG 都可以，推荐 SVG

SVG 更清晰、可直接内联控制颜色和滤镜，也方便后续加动效：

示例代码：

<div class="ai-icon">
  <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
    <path d="M32 8a24 24 0 1 0 0 48 24 24 0 0 0 0-48zm0 4a20 20 0 1 1 0 40 20 20 0 0 1 0-40z" fill="#4f46e5"/>
    <circle cx="32" cy="32" r="6" fill="#fff"/>
  </svg>
</div>

把 SVG 包在带 class 的 div 中，便于统一加动画和定位。

2. 呼吸动效：缩放 + 透明度微调

呼吸感的关键不是大幅缩放，而是 0.98 → 1.02 的细微变化，配合 0.95 → 1.0 的透明度浮动，节奏缓而柔（建议周期 3~4 秒）：

@keyframes breathe {
  0%, 100% {
    transform: scale(0.98);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

应用到图标容器：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

.ai-icon {
  animation: breathe 3.5s ease-in-out infinite;
}

3. 发光效果：box-shadow + 模糊滤镜增强柔和感

单靠 box-shadow 易显生硬，搭配 filter: blur() 和多层阴影更自然：

.ai-icon svg {
  filter: blur(0.5px); /* 轻微柔边 */
}
<p>.ai-icon::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 120%; height: 120%;
background: #4f46e5;
border-radius: 50%;
opacity: 0.3;
transform: translate(-50%, -50%);
filter: blur(12px);
animation: pulse-glow 3.5s ease-in-out infinite;
}

再定义发光脉冲关键帧（与呼吸同步但偏移相位，增强层次）：

@keyframes pulse-glow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.45; }
}

注意：需给 .ai-icon 加 position: relative 才能让伪元素准确定位。

4. 进阶细节：悬停强化 + 智能响应提示

用户 hover 时可短暂暂停呼吸、放大并增强光效，暗示“已就绪”：

.ai-icon:hover {
  animation-play-state: paused;
}
<p>.ai-icon:hover svg {
transform: scale(1.1);
}</p><p>.ai-icon:hover::after {
opacity: 0.6;
filter: blur(16px);
}

还可叠加一个极简 tooltip 或微动效文字（如“AI 在线中…”），用 opacity + translateY 关键帧淡入上浮，保持整体克制不干扰主视觉。