KeyframeStrokeText 关键帧描边

把任意文本渲染为先描边、后填充的关键帧动画。

基础用法

KeyframeStrokeText

示例即将加载...

<template>
  <div style="display: flex; flex-direction: column; gap: 18px;">
    <TxKeyframeStrokeText text="TuffEx" :font-size="56" />

    <TxKeyframeStrokeText
      text="Stroke + Fill"
      stroke-color="#0ea5e9"
      fill-color="#0f172a"
      :duration-ms="2400"
      :stroke-width="1.8"
      :font-size="42"
      :font-weight="600"
    />
  </div>
</template>

中文文案示例

Chinese text

示例即将加载...

<template>
  <TxKeyframeStrokeText
    text="关键帧描边动画"
    stroke-color="#16a34a"
    fill-color="#14532d"
    :duration-ms="2600"
    :stroke-width="1.6"
    :font-size="40"
    :font-weight="700"
  />
</template>

API

Props

属性名	类型	默认值	说明
`text`	`string`	`''`	要渲染的文本内容
`strokeColor`	`string`	`#4C4CFF`	描边颜色
`fillColor`	`string`	`#111827`	填充颜色
`durationMs`	`number`	`1800`	动画时长(ms)
`strokeWidth`	`number`	`2`	描边宽度
`fontSize`	`string \| number`	`64`	字号
`fontWeight`	`string \| number`	`700`	字重
`fontFamily`	`string`	`inherit`	字体族

交互契约

组件渲染一个 role="img" 的 SVG；text 非空时作为 aria-label。
text 为空时使用 non-breaking-space 保持 SVG 测量和占位，不输出 aria-label。
fontSize 为 number 时会转换为 px；durationMs、strokeWidth、颜色和字体参数通过 CSS 变量驱动动画。
挂载后会同步测量文本尺寸，并在文本、字体或描边宽度变化时重新测量。