跳到正文
AstraFoundry

功能磁贴

功能网格中的每块磁贴都带一个抽象小场景，演示这个功能做了什么。

实时网格

滚动到可见区域，用鼠标悬停磁贴，或用 Tab 键聚焦来重播。

结构

  1. 1一整张卡片，圆角 28px；单元格之间用边框色上的 1px 细线分隔。
  2. 2画面面板距单元格边缘 8px，圆角 20px，带淡淡的内描边和 45° 细线纹理。
  3. 3场景居中，约 126 × 118px，由线条、迷你窗口和输入框组成。不用截图，也不放真实文字。
  4. 4黄色只出现在场景的结果上。
  5. 5左上角是 32px 的图标块，磁贴播放时图标按笔画重新绘制。
  6. 6标题和一行描述放在画面下方，画面之外。

播放

  1. 1每块磁贴在约 70% 可见后 200ms 播放一次；同时进入的磁贴间隔 250ms 开始。
  2. 2一个 played 属性驱动所有动画。重播时移除它、强制重排，再加回来。
  3. 3鼠标悬停或键盘聚焦时，最终帧在 160ms 内模糊淡出，场景在模糊下重新开始，然后模糊消失。
  4. 4鼠标停留期间，每次播放结束 600ms 后再次重播。触屏点击直接跳转链接。
  5. 5悬停时单元格变暖，面板内描边加深，图标块从左上角由 32px 放大到 36px。
  6. 6开启减少动态效果时，所有磁贴直接显示最终帧。