MOTION EFFECT
金属流光扫过Glare Hover
一道斜向的白色高光带周期性扫过深色表面，像金属反光。Magic UI 的 glare-hover、Aceternity 的 Glare Card 都是这一族。
效果预览
Glare Hover · 金属流光
适合用在哪
深色按钮、会员卡/信用卡、深色产品卡的 hover 状态。
容易踩的坑
- 移动端没有 hover，只做悬停触发版会让触屏用户完全看不到效果。
- 高光带透明度超过 .5 扫过文字时，会短暂吞掉白色文字。
- 默认自动循环与 hover 版混用，多张卡片同时扫光显得杂乱。
设计提示词 · Prompt
金属流光扫过（Glare Hover）：容器深色渐变底（如 150deg #1f2937 到 #111827），overflow:hidden。::after 是一条宽 52px 的白色高光带，背景 linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent)，transform 先 skewX(-18deg) 并 translateX(-160px)；动画 2.8s ease-in-out 无限循环，前 55% 保持隐藏位置，之后扫到 translateX(190px)。hover 触发版把 ::after 的 animation-play-state 改为 running，默认 paused。
Glare Hover: the container has a dark gradient background (e.g. 150deg #1f2937 to #111827) and overflow:hidden. ::after is a 52px-wide white highlight band with background linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent), starting at transform skewX(-18deg) translateX(-160px); the animation runs 2.8s ease-in-out, infinite, staying in the hidden position for the first 55% and then sweeping to translateX(190px). For the hover-triggered version, the ::after's animation-play-state is paused by default and set to running on hover.
常见搭配
同一页面里经常和「金属流光扫过」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center"> <div class="m-glare">Glare Hover · 金属流光</div> </div>