H5页面微交互应建立可复用、低侵入、高性能的CSS基础体系，统一选择器、过渡属性、:active/:hover/:focus反馈及JS状态类，主节奏0.2s，确保多端兼容与可访问性。
给 H5 页面所有可点击元素统一加微交互，核心不是“挨个写动画”，而是建立一套可复用、低侵入、高性能的 CSS 基础体系，再配合轻量 JS 触发逻辑。重点是统一入口、统一节奏、统一行为逻辑，避免样式散落、timing 不一致、移动端失效等问题。
统一定义可点击元素的选择器与基础过渡声明
在全局 CSS 中，用语义化选择器一次性覆盖常见可点击元素，不依赖 class，减少维护成本：
- 选择器推荐：
button, [role="button"], a[href], input[type="submit"], input[type="button"], label[for], [data-clickable] - 过渡声明必须写在默认状态（非伪类），且只动可硬件加速属性：
transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s ease; - 禁用
transition: all——它会意外触发height、color、border等不可控变化，导致抖动或卡顿
统一 :active 按压反馈，兼顾 iOS 兼容性
iOS Safari 对 :active 默认不响应，需主动“激活”：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 所有可点击元素加
cursor: pointer（PC 和部分安卓有效） - 对关键按钮或区域，额外加
ontouchstart=""空属性（如<button ontouchstart=""></button>），强制 iOS 启用:active -
:active样式只做两件事：轻微缩放 + 背景色加深&:active { transform: scale(0.97); background-color: var(--bg-pressed, #0000001a); }
统一 hover 与 focus 反馈，适配多端输入方式
不能只靠 :hover，要同时支持鼠标悬停、键盘聚焦、触屏模拟焦点：
- 用
:hover+:focus+:focus-visible组合，确保键盘用户也能看到反馈 - hover/focus 时推荐加轻微上浮 + 阴影增强：
&:hover, &:focus, &:focus-visible { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.12); } - 对纯图标按钮等无文字元素，额外加
outline: 2px solid var(--accent)（仅 focus-visible 时），保障可访问性
统一 JS 触发类，用于复杂状态（如加载中、禁用、成功）
当需要超出伪类能力的状态（比如提交中、校验失败），用 class 切换驱动 CSS 动画，而非内联 style：
- 预设状态类：
is-loading（旋转+禁用）、is-disabled（透明度+指针禁用）、is-success（微缩放+色值脉冲） - JS 中统一调用：
el.classList.add('is-loading')，动画结束后监听transitionend或animationend自动清理 - 所有状态类动画都基于
@keyframes预定义，例如：@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }.is-success { animation: pulse 1.2s ease-in-out; }
不复杂但容易忽略：真正优雅的统一，不在动画多炫，而在节奏一致（0.2s 主节奏）、反馈明确（按压感/悬停感/状态感分明）、且不干扰用户操作流。一套 CSS + 少量 JS 就能覆盖 90% 场景，无需引入动画库。
