mcpField
C
css-micro-fx

css-micro-fx

github.com/dabaibian设计与 UI637 次安装23 周前更新
代码仓库

关于 css-micro-fx

用于为输入框、按钮、加载器、链接和完成状态设计 CSS 反馈效果的技能。它帮助 UI 开发者按界面风格和交互状态选择效果，并提供无障碍与减少动态效果的指引。

主要功能

  1. 01输入框焦点效果
  2. 02按钮点击效果
  3. 03加载与完成状态
  4. 04文本链接效果
  5. 05风格兼容性指引
  6. 06减少动态效果指引

适用场景

  1. 01为表单字段添加焦点反馈
  2. 02让按钮点击呈现触感反馈
  3. 03显示异步操作的加载状态
  4. 04标记任务完成和链接文本

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dabaibian/css-skills --skill css-micro-fx

安装后在 Claude Code 中输入/css-micro-fx确认已加载。

详细介绍

CSS Micro-FX

功能性反馈效果：输入框、按钮、加载器、文本链接。 这些效果会响应 :focus / :active / 状态变化，而非悬停。

第 1 步 — 检测上下文和样式

应用任何效果之前，先阅读现有 UI。

需要阅读的内容
Form density
  few fields, large padding  → marketing / signup page → Shine, Bubble
  many fields, tight layout  → app / dashboard        → Bars, subtle Highlight

Button prominence
  large CTA (full-width or hero)  → Shine or Slide
  small inline button             → Jelly or Pulse

Color palette
  monochrome / muted  → MINIMAL → Bars, Highlight only
  vivid accent color  → BOLD    → all effects

Existing focus styles
  outline: none (reset)  → must add visible focus → use Bars or Glow
  outline present        → enhance, don't replace
  
Dark background
  yes → use lighter glow variants
  no  → standard effects
样式分类（与 css-hover-effects 相同）
样式关键信号强度
MINIMAL柔和的配色、大圆角条形、仅高亮
BOLD鲜明的强调色、强烈的阴影光泽、滑入、气泡
PLAYFUL圆润、多彩果冻、气泡、脉冲
CORPORATE紧凑布局、柔和的配色条形、微妙的光晕
DARK-PREMIUM深色背景、发光的强调色光晕、带强调色的条形

第 2 步 — 兼容性矩阵

效果MINIMALBOLDPLAYFULCORPORATEDARK-PREMIUM
条形（输入框）✅ ★✅✅✅ ★✅
高亮（输入框）✅✅✅✅✅
光晕（输入框）❌✅✅❌✅ ★
气泡（按钮）❌✅✅ ★❌❌
果冻（按钮）❌✅✅ ★❌❌
光泽（按钮）❌✅ ★✅❌✅
滑入（按钮）✅✅ ★✅✅✅
脉冲（按钮）❌✅✅❌❌
柱条（加载器）✅✅✅✅✅
顶线（加载器）✅ ★✅✅✅ ★✅
删除线（完成状态）✅✅✅✅✅
下划线（链接）✅ ★✅✅✅✅

第 3 步 — 效果库

类别：输入框聚焦效果

应用于 <input>、<textarea>、<select>。 务必搭配可见的聚焦环或其替代效果，以确保无障碍访问。

条形

底部边框从中间向两侧滑入。简洁、通用。 最适合：任何样式。不确定时的默认选择。

.fx-input-bars {
  --accent: #6366f1;
  border: none;
  border-bottom: 2px solid #e4e4e7;
  border-radius: 0;
  padding: 10px 4px;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
  transition: border-color 0.25s ease;
  position: relative;
}
.fx-input-bars:focus {
  border-bottom-color: var(--accent);
}
/* Optional: animated line variant */
.fx-input-bars-animated {
  border: none;
  border-bottom: 2px solid #e4e4e7;
  outline: none;
  padding: 10px 4px;
  width: 100%;
  font-size: 14px;
  background: transparent;
}
.fx-input-bars-animated + .bar-line {
  display: block;
  height: 2px;
  background: var(--accent, #6366f1);
  width: 0;
  transition: width 0.3s ease;
  margin-top: -2px;
}
.fx-input-bars-animated:focus + .bar-line {
  width: 100%;
}

动画变体的 HTML：

<input class="fx-input-bars-animated" type="text" placeholder="Name">
<span class="bar-line"></span>
高亮

聚焦时显示柔和的背景色调。适合圆角输入框和卡片式表单。

.fx-input-highlight {
  --accent: #6366f1;
  --highlight: rgba(99, 102, 241, 0.08);
  border: 1.5px solid #e4e4e7;
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  font-size: 14px;
  background: white;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.fx-input-highlight:focus {
  border-color: var(--accent);
  background-color: var(--highlight);
}
光晕

聚焦环发光。适合 DARK-PREMIUM 和 BOLD 样式。

.fx-input-glow {
  --accent: #6366f1;
  --glow: rgba(99, 102, 241, 0.25);
  border: 1.5px solid #e4e4e7;
  border-radius: 8px;
  padding: 10px 14px;
  outline: none;
  width: 100%;
  font-size: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.fx-input-glow:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--glow);
}
标签浮动

输入框聚焦或有内容时，标签会向上移动。 适用于标签位于输入框内部的表单。

.fx-field-float {
  position: relative;
  padding-top: 16px;
}
.fx-field-float input {
  border: 1.5px solid #e4e4e7;
  border-radius: 8px;
  padding: 14px 14px 6px;
  outline: none;
  width: 100%;
  font-size: 14px;
  transition: border-color 0.25s ease;
}
.fx-field-float label {
  position: absolute;
  left: 14px;
  top: 26px;
  font-size: 14px;
  color: #a1a1aa;
  pointer-events: none;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}
.fx-field-float input:focus,
.fx-field-float input:not(:placeholder-shown) {
  border-color: #6366f1;
}
.fx-field-float input:focus + label,
.fx-field-float input:not(:placeholder-shown) + label {
  top: 6px;
  font-size: 11px;
  color: #6366f1;
}

HTML：

<div class="fx-field-float">
  <input type="text" id="name" placeholder=" ">
  <label for="name">Full name</label>
</div>
类别：按钮点击效果

应用于 <button> 元素。由 :active 触发，或通过 JS 类触发。

气泡

点击时，涟漪圆圈从点击位置扩散。

.fx-btn-bubble {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.fx-btn-bubble::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 120%;
  padding-top: 120%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.4s ease;
}
.fx-btn-bubble:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: 0s;
}
果冻

点击时产生弹性挤压效果。仅适用于 PLAYFUL 和 BOLD 样式。

.fx-btn-jelly {
  cursor: pointer;
  transition: transform 0.1s ease;
}
.fx-btn-jelly:active {
  animation: fx-jelly 0.4s ease;
}
@keyframes fx-jelly {
  0%  { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.12); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.96, 1.04); }
  100% { transform: scale(1, 1); }
}
光泽

悬停时，光线斜向扫过按钮。营造高级 CTA 的质感。

.fx-btn-shine {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.fx-btn-shine::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -100%;
  width: 60%;
  height: 220%;
  background: rgba(255, 255, 255, 0.22);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
  pointer-events: none;
}
.fx-btn-shine:hover::after {
  left: 140%;
}
滑入

背景色在悬停时从左侧滑入。用途广泛。

.fx-btn-slide {
  --slide-color: var(--accent, #6366f1);
  --text-hover: white;
  position: relative;
  z-index: 1;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s ease;
}
.fx-btn-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--slide-color);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: -1;
}
.fx-btn-slide:hover::before {
  transform: translateX(0);
}
.fx-btn-slide:hover {
  color: var(--text-hover);
}
脉冲

持续脉动的环形效果。吸引注意力，适用于单个操作按钮。 每页最多用于一个元素。

.fx-btn-pulse {
  --pulse-color: rgba(99, 102, 241, 0.4);
  position: relative;
  cursor: pointer;
}
.fx-btn-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--pulse-color);
  animation: fx-pulse-ring 1.5s ease infinite;
}
@keyframes fx-pulse-ring {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.15); opacity: 0; }
}
按压

点击时产生微妙的深度按压效果。营造按钮被按下的触感。 适用于任何样式，是最保守的选择。

.fx-btn-press {
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.fx-btn-press:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}
类别：加载状态

异步操作进行中时使用。 需要时通过 JS 切换加载类。

柱条

5 根条形依次波动。尺寸紧凑，适合放在按钮内。

.fx-loader-pillars {
  display: inline-flex;
  gap: 3px;
  align-items: flex-end;
  height: 18px;
  vertical-align: middle;
}
.fx-loader-pillars span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  animation: fx-pillars 0.9s ease infinite;
}
.fx-loader-pillars span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.fx-loader-pillars span:nth-child(2) { height: 12px; animation-delay: 0.12s; }
.fx-loader-pillars span:nth-child(3) { height: 18px; animation-delay: 0.24s; }
.fx-loader-pillars span:nth-child(4) { height: 12px; animation-delay: 0.36s; }
.fx-loader-pillars span:nth-child(5) { height: 6px;  animation-delay: 0.48s; }
@keyframes fx-pillars {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50%       { opacity: 1;   transform: scaleY(1); }
}

HTML：

<div class="fx-loader-pillars">
  <span></span><span></span><span></span><span></span><span></span>
</div>
顶线

进度条横扫整个宽度。适用于整页或某个区块的加载状态。

.fx-loader-overline {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(99, 102, 241, 0.15);
  z-index: 9999;
  overflow: hidden;
}
.fx-loader-overline::after {
  content: '';
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: var(--accent, #6366f1);
  border-radius: 0 2px 2px 0;
  animation: fx-overline 1.1s ease infinite;
}
@keyframes fx-overline {
  to { left: 100%; }
}

用法：路由切换或发起 fetch 时，添加或移除 .fx-loader-overline div。

点状旋转器

三个点依次脉动。适用于内联的“正在输入”／“正在思考”状态。

.fx-loader-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.fx-loader-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: fx-dot-pulse 1.2s ease infinite;
}
.fx-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.fx-loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fx-dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}
环形旋转器

经典的圆形旋转器。适用于按钮和内联加载器。

.fx-spinner-ring {
  --size: 18px;
  --thickness: 2px;
  --color: currentColor;
  width: var(--size);
  height: var(--size);
  border: var(--thickness) solid rgba(255,255,255,0.25);
  border-top-color: var(--color);
  border-radius: 50%;
  animation: fx-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }
删除线

任务完成时，线条划过文本。

.fx-done {
  position: relative;
  display: inline-block;
  color: #a1a1aa;
}
.fx-done::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.5px;
  width: 0;
  background: var(--accent, #22c55e);
  animation: fx-strike 0.4s ease forwards;
}
@keyframes fx-strike {
  to { width: 100%; }
}

任务标记为完成时，通过 JS 应用 .fx-done 类。

类别：文本链接效果

应用于正文中的 <a> 标签。

下划线绘制

悬停时，线条从左侧绘出。替代静态下划线。

.fx-link-draw {
  --accent: #6366f1;
  text-decoration: none;
  position: relative;
  color: var(--accent);
}
.fx-link-draw::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 1.5px;
  width: 0;
  background: var(--accent);
  transition: width 0.25s ease;
}
.fx-link-draw:hover::after { width: 100%; }
下划线滑出

线条始终可见，滑出后再滑回——带来意外的反转效果。

.fx-link-slide {
  --accent: #6366f1;
  text-decoration: none;
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  transition: background-size 0.25s ease;
}
.fx-link-slide:hover {
  background-size: 0% 1.5px;
}
颜色渐变

悬停时，文本颜色过渡为强调色。简单、安全。

.fx-link-color {
  --accent: #6366f1;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.fx-link-color:hover { color: var(--accent); }

第 4 步 — 与 css-hover-effects 结合

这两项技能专为配合使用而设计：

css-hover-effects    →  :hover state (mouse enter)
css-micro-fx         →  :focus / :active / state change

示例：精致按钮

/* hover-effects handles the hover state */
.btn { /* hvr-shine applied */ }

/* micro-fx handles the click */
.btn { /* fx-btn-jelly applied */ }

/* Together: shine on hover, jelly on click */

示例：精致输入框

/* micro-fx handles focus */
.input { /* fx-input-bars applied */ }

/* hover-effects adds a subtle border hint on hover */
.input:hover { border-color: #c4b5fd; }

第 5 步 — 应用检查清单

  • 已识别表单场景（营销页面还是应用），并调整了效果强度
  • 已选择输入框效果（极简／企业风格选用 Bars，深色／大胆风格选用 Glow）
  • 已应用 prefers-reduced-motion 区块（每个样式表仅需一次）
  • 每个页面使用 Pulse 的按钮不超过 1 个
  • 已将 Overline 加载动画与路由／获取数据的生命周期关联
  • 删除线由 JS 类触发，而非仅由 CSS 触发
  • 所有效果都使用指向现有调色板的 var(--accent)
/* Always include — paste once at the top of any stylesheet using these effects */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

快速参考

需求效果类
输入框聚焦，极简风格动画条fx-input-bars-animated
输入框聚焦，任意风格高亮fx-input-highlight
输入框聚焦，深色／大胆风格光晕fx-input-glow
浮动标签标签浮动fx-field-float
按钮点击，活泼风格果冻fx-btn-jelly
按钮点击，高级风格气泡fx-btn-bubble
按钮悬停发光发光fx-btn-shine
按钮悬停滑动滑动fx-btn-slide
吸引用户注意 CTA脉冲fx-btn-pulse
按压触感按压fx-btn-press
按钮加载动画柱状动画fx-loader-pillars
页面级加载动画顶部线条fx-loader-overline
聊天／AI 思考点状动画fx-loader-dots
通用旋转动画圆环fx-spinner-ring
任务完成删除线fx-done
正文链接绘制下划线fx-link-draw

评论

支持 Markdown