跳到正文

索引档案

前端设计博物馆 · FRONTEND DESIGN MUSEUM · 40 件标本

先给效果起个名字,
再让 AI 实现它。

用 AI 做网页时最卡的一步,往往不是不会做,而是不知道那个效果叫什么。这里把常见效果都做成活的标本:看到、摸到、把参数调到满意,然后复制成一句 AI 听得懂的需求。

支持拼音与首字母:maoboli / mbl 都能找到毛玻璃

浏览全部 40 件

正在展出

浏览全部 40 件
  • V-01固定舞台

    毛玻璃

    Frosted Glass

    面板背后的内容被真的模糊掉,像隔着一层磨砂玻璃看过去。

    磨砂玻璃 / 磨砂

  • M-01固定舞台

    交错进场

    Stagger

    一组元素不是同时出现,而是按顺序一个接一个进来。

    错峰动画 / 依次出现

  • 点开自己动手
    L-01自带滚动

    粘性头部

    Sticky Header

    页面滚动时头部留在顶部,常配合「下滑隐藏、上滑出现」。

    吸顶导航 / 固定顶栏

五个展厅

四件工具

怎么用

怎么用
  1. 找到名字

    知道名字就搜名字;不知道就搜口语(「磨砂」「果冻」)、拼音(maoboli)或走感觉导航。

  2. 调到满意

    每条都有可交互演示和参数滑块,时长、缓动、模糊半径滑一遍就有数。

  3. 交给 AI

    复制带参数的中文需求句或英文术语,或去速查表把几个效果整段导出。

展品分类参考: