GlowText 扫光

用于在文本或任意内容（包括图片/卡片）上叠加“高光扫过”的动效。

默认启用 adaptive 模式（容器级扫光，适合图片/卡片）；文本建议使用 mode="text-clip"，扫光会裁切到文字字形。
text-clip 当前采用右 -> 左扫动方向（与 ShinyText 参考效果一致）。

基础用法

GlowText

示例即将加载...

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <TxGlowText
      mode="text-clip"
      :band-size="24"
      :duration-ms="1300"
      :opacity="0.95"
      color="rgba(255, 255, 255, 0.98)"
      style="font-size: 20px; font-weight: 700; color: var(--tx-text-color-secondary, #a9b1bd);"
    >
      GlowText
    </TxGlowText>

    <TxGlowText
      mode="text-clip"
      :angle="18"
      :band-size="26"
      :duration-ms="1700"
      :opacity="0.92"
      color="rgba(125, 211, 252, 0.95)"
      style="font-size: 14px; font-weight: 500; color: var(--tx-text-color-secondary, #9ea8b7);"
    >
      Subtle sweep for captions
    </TxGlowText>

    <TxGlowText mode="text-clip" :angle="18" :band-size="30" :duration-ms="1400" color="rgba(99, 102, 241, 0.9)" style="font-size: 15px; font-weight: 600;">
      Sweep highlight over text
    </TxGlowText>

    <TxGlowText mode="text-clip" :angle="20" :band-size="34" :duration-ms="1600" style="font-size: 16px; font-weight: 700;">
      <span style="background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6); -webkit-background-clip: text; color: transparent;">
        Colorful text still shines
      </span>
    </TxGlowText>
  </div>
</template>

作用于图片/卡片

GlowText on image

示例即将加载...

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <TxGlowText tag="div" :radius="14" :angle="20" :band-size="34" :duration-ms="1600" color="rgba(255, 255, 255, 0.95)">
      <div
        style="width: 240px; height: 120px; border-radius: 14px; background: linear-gradient(135deg, #111827, #0f766e); border: 1px solid var(--tx-border-color-light);"
      />
    </TxGlowText>

    <TxGlowText tag="div" :radius="12" :angle="-12" :band-size="40" :duration-ms="2000" :opacity="0.55" color="rgba(255, 255, 255, 0.85)" blend-mode="soft-light">
      <div
        style="width: 240px; height: 120px; border-radius: 12px; background: linear-gradient(135deg, #f8fafc, #e2e8f0); border: 1px solid rgba(148, 163, 184, 0.25);"
      />
    </TxGlowText>
  </div>
</template>

更多案例

GlowText in UI

示例即将加载...

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <TxGlowText tag="div" :radius="999" :angle="-20" :band-size="28" :duration-ms="1200" :repeat="false">
      <div
        style="padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #ffffff; font-weight: 600; font-size: 13px; letter-spacing: 0.02em;"
      >
        New Feature
      </div>
    </TxGlowText>

    <TxGlowText tag="div" :radius="12" :angle="16" :band-size="36" :duration-ms="1800" :opacity="0.6" color="rgba(255, 255, 255, 0.85)">
      <div
        style="padding: 12px 14px; border-radius: 12px; background: #0b1220; color: #e2e8f0; border: 1px solid rgba(148, 163, 184, 0.2); display: flex; align-items: center; gap: 10px;"
      >
        <div style="width: 8px; height: 8px; border-radius: 999px; background: #22c55e;"></div>
        <div>
          <div style="font-size: 12px; opacity: 0.8;">Connected</div>
          <div style="font-size: 14px; font-weight: 600;">Realtime Sync</div>
        </div>
      </div>
    </TxGlowText>
  </div>
</template>

API

Props

属性名	类型	默认值	说明
`tag`	`string`	`span`	外层渲染标签
`active`	`boolean`	`true`	是否启用扫光
`repeat`	`boolean`	`true`	是否循环
`durationMs`	`number`	`1400`	动画时长(ms)
`delayMs`	`number`	`0`	延迟(ms)
`angle`	`number`	`20`	扫光角度(deg)
`bandSize`	`number`	`38`	高光带宽度(%)
`color`	`string`	`rgba(255, 255, 255, 0.9)`	高光颜色
`opacity`	`number`	`0.75`	高光不透明度
`blendMode`	`string`	`screen`	混合模式（`adaptive` 下会优先尝试 `plus-lighter`；如 `screen` / `overlay` / `lighten`）
`mode`	`'classic' \| 'adaptive' \| 'text-clip'`	`adaptive`	扫光模式（`text-clip` 会把高光裁切到文字）
`backdrop`	`string`	-	自定义 `backdrop-filter`（如 `brightness(1.2) saturate(1.1)`）
`radius`	`number`	`10`	圆角(px)