@xwink/ui

    GlowCard

    卡片高亮的一组 CSS 工具类(不是组件)。悬停点亮;套在 .ui-glow-marquee 里时按内联 --ui-i 错开起点轮流亮起,像跑马灯扫过。

    所有颜色都从 --ui-primary 派生,切换主色时卡片跟着变,不需要脚本。

    基础

    悬停点亮 + 成组跑马灯
    • 长按连发
    • 一键宏
    • 多段宏切换
    • 全局热键
    • 明暗主题
    • 多布局
    vue
    <ul class="ui-glow-marquee grid gap-4 sm:grid-cols-3">
      <li v-for="(card, index) in cards" :key="card" class="ui-glow-card p-5" :style="{ '--ui-i': index }">
        {{ card }}
      </li>
    </ul>
    

    动画值会盖过 :hover,所以鼠标进网格就整组撤掉动画、交还给悬停——不这么做的话,悬停的卡片会被轮播动画按自己的节奏抢回去。

    节奏可调:--ui-glow-cycle(一轮时长,缺省 14.4s)与 --ui-glow-stagger(相邻卡片间隔,缺省 2.4s)。默认那套是按一轮 6 格调的,卡片数量差很多时要一起改,否则轮播会出现空档或撞车。