网页十种呼吸风格与交互细节

这是一个可直接运行的 HTML 文档，里面用纯 CSS 实现了 10 种不同风格的红点呼吸效果。页面把每种效果独立放在卡片里，方便您对比和取用。

HTML/XML浏览复制<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>红点呼吸效果 · 10 种风格</title>
<style>
  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(ellipse at 50% 0%, #1a1a24 0%, #0b0b10 60%);
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #e8e8ee;
    padding: 48px 24px 64px;
    -webkit-font-smoothing: antialiased;
  }

  h1 {
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .04em;
    margin: 0 0 8px;
  }
  .sub {
    text-align: center;
    font-size: 13px;
    color: #6c6c80;
    margin: 0 0 44px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
  }

  .card {
    background: #14141b;
    border: 1px solid #23232e;
    border-radius: 16px;
    padding: 8px 8px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color .25s, transform .25s;
  }
  .card:hover { border-color: #35354a; transform: translateY(-2px); }

  .stage {
    height: 110px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .name { font-size: 13px; color: #9c9cb0; letter-spacing: .03em; text-align: center; }
  .name code {
    display: block;
    font-size: 10.5px;
    color: #55556a;
    margin-top: 3px;
    font-family: ui-monospace, Menlo, monospace;
  }

  /* ============ 基础红点 ============ */
  .dot {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ff3b30;
    flex: none;
  }

  /* ========== 1. 经典呼吸 ========== */
  .s1 { animation: breathe 1.5s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(.85); opacity: .6; }
    50%      { transform: scale(1.15); opacity: 1; }
  }

  /* ========== 2. 脉冲扩散 ========== */
  .s2::before, .s2::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ff3b30;
    animation: pulseRing 2s cubic-bezier(.2,.6,.3,1) infinite;
  }
  .s2::after { animation-delay: 1s; }
  @keyframes pulseRing {
    0%   { transform: scale(1);   opacity: .75; }
    100% { transform: scale(3.4); opacity: 0; }
  }

  /* ========== 3. 霓虹发光 ========== */
  .s3 {
    background: #ff2d55;
    animation: neon 2s ease-in-out infinite;
  }
  @keyframes neon {
    0%, 100% {
      transform: scale(.9);
      box-shadow: 0 0 4px #ff2d55, 0 0 12px #ff2d55, 0 0 24px rgba(255,45,85,.5);
    }
    50% {
      transform: scale(1.12);
      box-shadow: 0 0 8px #ff2d55, 0 0 28px #ff2d55, 0 0 52px #ff2d55, 0 0 84px rgba(255,45,85,.45);
    }
  }

  /* ========== 4. 心跳双跳 ========== */
  .s4 { animation: heartbeat 1.4s ease-in-out infinite; }
  @keyframes heartbeat {
    0%   { transform: scale(1); }
    12%  { transform: scale(1.38); }
    24%  { transform: scale(1); }
    36%  { transform: scale(1.26); }
    55%  { transform: scale(1); }
    100% { transform: scale(1); }
  }

  /* ========== 5. 涟漪多重 ========== */
  .s5 i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid #ff3b30;
    animation: ripple 2.4s cubic-bezier(.22,.61,.36,1) infinite;
  }
  .s5 i:nth-child(1) { animation-delay: 0s; }
  .s5 i:nth-child(2) { animation-delay: .8s; }
  .s5 i:nth-child(3) { animation-delay: 1.6s; }
  @keyframes ripple {
    0%   { transform: scale(1);   opacity: .9; }
    100% { transform: scale(3.2); opacity: 0; }
  }

  /* ========== 6. 渐变呼吸 ========== */
  .s6 { animation: hueBreathe 2.4s ease-in-out infinite; }
  @keyframes hueBreathe {
    0%, 100% {
      transform: scale(.9);
      background: #ff3b30;
      box-shadow: 0 0 0 rgba(255,59,48,0);
    }
    50% {
      transform: scale(1.18);
      background: #ff9500;
      box-shadow: 0 0 22px rgba(255,149,0,.65);
    }
  }

  /* ========== 7. 极简线框 ========== */
  .s7 {
    background: transparent;
    border: 2px solid #ff3b30;
    animation: outlineBreathe 1.8s ease-in-out infinite;
  }
  @keyframes outlineBreathe {
    0%, 100% { transform: scale(1);    border-color: rgba(255,59,48,.3); }
    50%      { transform: scale(1.28); border-color: rgba(255,59,48,1); }
  }

  /* ========== 8. 液态果冻 ========== */
  .s8 { animation: jelly 1.6s ease-in-out infinite; }
  @keyframes jelly {
    0%, 100% { transform: scale(1, 1); }
    20%      { transform: scale(1.25, .8); }
    40%      { transform: scale(.85, 1.2); }
    60%      { transform: scale(1.12, .92); }
    80%      { transform: scale(.96, 1.05); }
  }

  /* ========== 9. 呼吸光晕 ========== */
  .s9 { animation: halo 2s ease-in-out infinite; }
  @keyframes halo {
    0%, 100% {
      transform: scale(.92);
      box-shadow: 0 0 6px 2px rgba(255,59,48,.35);
    }
    50% {
      transform: scale(1.08);
      box-shadow: 0 0 24px 10px rgba(255,59,48,.85), 0 0 48px 20px rgba(255,59,48,.25);
    }
  }

  /* ========== 10. 数字角标 ========== */
  .badge {
    height: 20px;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ff3b30;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    animation: badgeBreathe 2s ease-in-out infinite;
  }
  @keyframes badgeBreathe {
    0%, 100% { transform: scale(.94); box-shadow: 0 0 0 rgba(255,59,48,0); }
    50%      { transform: scale(1.06); box-shadow: 0 0 16px rgba(255,59,48,.7); }
  }
  /* 数字本身不缩放，保持清晰 */
  .badge span { display: inline-block; }

  /* 无障碍：系统减弱动态时全部静止 */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; }
  }
</style>
</head>
<body>

  <h1>红点呼吸效果 · 10 种风格</h1>
  <p class="sub">纯 CSS 实现 · 每张卡片可单独复制使用</p>

  <div class="grid">

    <div class="card">
      <div class="stage"><div class="dot s1"></div></div>
      <div class="name">经典呼吸<code>scale + opacity</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s2"></div></div>
      <div class="name">脉冲扩散<code>ring pulse ×2</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s3"></div></div>
      <div class="name">霓虹发光<code>box-shadow glow</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s4"></div></div>
      <div class="name">心跳双跳<code>heartbeat</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s5"><i></i><i></i><i></i></div></div>
      <div class="name">涟漪多重<code>stagger ×3</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s6"></div></div>
      <div class="name">渐变呼吸<code>color shift</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s7"></div></div>
      <div class="name">极简线框<code>outline</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s8"></div></div>
      <div class="name">液态果冻<code>squash & stretch</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="dot s9"></div></div>
      <div class="name">呼吸光晕<code>soft halo</code></div>
    </div>

    <div class="card">
      <div class="stage"><div class="badge"><span>99+</span></div></div>
      <div class="name">数字角标<code>badge breathe</code></div>
    </div>

  </div>

</body>
</html>

十种呼吸风格与交互细节

这十张卡片各藏了一种呼吸节奏，鼠标悬停还能看到轻微上浮。

• 风格与实现：从经典缩放、脉冲扩散到霓虹发光、心跳双跳、涟漪多重等，每种都用了不同的 CSS 动画属性组合，比如 scale + opacity、box-shadow、border 等。
• 交互反馈：鼠标悬停卡片时，边框会微微变亮，卡片上浮，帮您快速定位当前查看的效果。
• 无障碍适配：如果系统开启了“减弱动态效果”，页面会自动停掉所有呼吸动画，避免眩晕。
• 数字角标：最后一个角标只有数字保持静止，背景呼吸缩放，防止文字变形。

优化建议： 页面中的红点颜色是统一变量值 #ff3b30，如果您想换一套品牌色，可以全局替换这个色值，保持整体一致。