Agent Skills
› nexu-io/motion-anything
› star-border
star-border
GitHub纯CSS实现的按钮边框柔和光晕动画效果，适用于单一CTA元素。支持自定义颜色、宽度和时长，兼容减少动态偏好设置，轻量无依赖。
触发场景
需要为单个按钮添加柔和的边框光效
希望在不引入JavaScript的情况下实现CSS动画
安装
npx skills add nexu-io/motion-anything --skill star-border -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/reactbits.dev\/animations\/star-border",
"design_system": {
"requires": false
}
},
"name": "star-border",
"triggers": [
"star border",
"animated outline button",
"gradient border",
"星光边框",
"渐变描边按钮"
],
"description": "A soft light rotates around a pill\/button border — a gentle animated outline for a single CTA. One\nper view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion.\n"
}
star-border
A light that circles a button's border. Dependency-free, reduced-motion safe.
How to apply
Copy star-border.css; <button class="star">Get started</button>. Tune --star-color, --star-w, duration.
版本历史
- b016900 当前 2026-07-11 17:10
