/* CSS 片段将在这里显示 */
一个页面覆盖前端常用的 49 种纯 CSS 效果与组件：前 9 种是基础工具，后 40 种是「效果库」（按钮、加载动画、提示与气泡、卡片、表单、导航与组件、布局、文字与背景）。左侧调参、右侧实时预览、底部一键复制或下载代码。生成的代码开头附带所需的 HTML 结构注释，粘贴即可用。
| 效果 | 用途 |
|---|---|
| Flex 布局 | 可视化调 flex-direction / justify-content / align-items / gap，理清主轴与交叉轴 |
| CSS 圆角 | 四个角独立设置 border-radius |
| 霓虹灯文字 | 多层 text-shadow 叠加的发光文字，适合暗色主题、LOGO |
| 故障文字 (Glitch) | 伪元素 + clip 关键帧模拟信号干扰重影 |
| 新拟态 (Neumorphism) | 双向 box-shadow 打造凹凸柔和质感 |
| 3D 卡片翻转 | perspective + rotateY + backface-visibility 的翻转卡片 |
| 毛玻璃 (Backdrop Filter) | backdrop-filter: blur() 磨砂半透明，含 -webkit- 前缀与回退方案 |
| 关键帧动画 (@keyframes) | 十种模板（淡入 / 上滑 / 弹跳 / 旋转 / 脉冲 / 摆动 / 翻转 / 抖动 / 漂浮 / 摇摆），可调时长、延迟、次数、缓动、方向 |
| 过渡动画 (transition + hover) | 九种模板（透明度 / 缩放 / 旋转 / 斜切 / 位移 / 阴影 / 背景色 / 模糊），可选 :hover / :focus / :active 触发 |
效果库（40 种）
| 分类 | 内容 |
|---|---|
| 按钮 | 渐变按钮、描边按钮（填充滑入，可选方向）、霓虹发光按钮、3D 按压按钮、毛玻璃按钮、箭头按钮 |
| 加载动画 | 旋转圆环 Spinner、三点跳动、雷达脉冲、声波柱状、条纹进度条、骨架屏 Shimmer |
| 提示与气泡 | 纯 CSS Tooltip（上下左右四个方向）、提示条 Alert（信息 / 成功 / 警告 / 错误）、对话气泡（四个尖角位置）、通知徽标（红点脉冲） |
| 卡片 | 悬浮抬升卡片、渐变边框卡片、光泽扫过卡片、图文叠层（悬停显示说明） |
| 表单 | 浮动标签输入框、开关 Toggle Switch、自定义复选框、分段选择器 |
| 导航与组件 | 手风琴（原生 details）、纯 CSS 标签页、导航下划线滑入、面包屑、模态框（淡入 + 缩放） |
| 布局 | Grid 网格、自适应网格（auto-fit + minmax）、圣杯布局（grid-template-areas）、容器查询卡片（@container）、瀑布流多列（columns） |
| 文字与背景 | 渐变文字（可流动）、描边文字、打字机效果、链接下划线动画、流动渐变背景、纯 CSS 图案背景（圆点 / 网格 / 斜条纹 / 棋盘） |
效果库的预览放在一个隔离的 iframe 里，和页面样式互不影响，预览框右下角可以拖动改宽度，用来检查响应式和容器查询的表现。输出的代码全部是原生 CSS（用到 color-mix()、@container、:has 这类较新写法的地方，需要现代浏览器）。
Q：生成的代码需要额外的 HTML 结构吗？
A：需要，但工具已经把它写在输出代码的开头注释里。圆角、霓虹、新拟态、关键帧、过渡只要一个元素套类名；故障文字要元素带 data-text 且值和文字一致；3D 卡片要 .card-3d > .card-inner > .card-front / .card-back 三层。
Q：毛玻璃在某些浏览器不生效？
A：backdrop-filter 需要较新浏览器，且父级必须有背景或图片磨砂才看得出来。生成结果里含 -webkit- 前缀和 .no-backdrop 回退样式（半透明背景 + 阴影）。
Q：关键帧动画放上去不播放？
A：animation-fill-mode: both 已包含。若元素初始就在视口内会立刻播一次；想滚动到才触发需要自己配合 IntersectionObserver 加类名。
Q：过渡动画的「触发后」预览是什么？ A：右侧第二个方块常驻显示触发后的状态，方便和默认态对比，不用把鼠标一直悬在上面。
相关：颜色选择 · CSS Sprite 生成 · Less 编译 · HTML5 特性检测 · 盒阴影匹配。