关于与致谢

关于

这里收集网页动效。每个效果有正在播放的演示、中英文名和一句大白话说明；点一下卡片，就复制一段能让 AI 照着做的提示词，也能复制原生 JS 加 CSS 的代码。

给 AI 用：每个效果都有一份给 AI 读的说明 /effects/<id>.md，写了原理、参数和参考代码，不执行脚本也能读。

收藏和"最近复制"只存在你自己的浏览器里，不上传。

作者的个人网站：B.Museum

致谢与许可

网站用到的第三方代码、文字和字体，按各自的许可使用。

效果

• StyleKit · Stagger Children许可：MIT（全文）改写自它的入场动作和默认值（淡入加上移、每个 500ms、间隔 75ms、ease-out）；改成原生 JS，内容默认可见，脚本出错时不会把内容藏住；用在「错峰入场」
• Animation Handbook · Clip-Path Reveal许可：MIT（全文）改写自它的做法（clip-path: inset() 从一边拉开，图片本身不动）；改成原生 JS，内容默认完整可见，脚本出错时不会被裁掉；时长从 800ms 调成 900ms，缓动换成两头慢的曲线；用在「遮罩揭示」
• StyleKit · Blur In许可：MIT（全文）改写自它的动作（从模糊、透明开始回到清楚，ease-out）；改成原生 JS，内容默认可见，脚本出错时不会把内容藏住；默认值从 500ms、10px 调成 700ms、14px，看得出模糊的过程；用在「模糊到清晰」
• StyleKit · Underline Draw许可：MIT（全文）改写自它的动作和默认值（从左往右画出、往右收回，300ms，cubic-bezier(0.4, 0, 0.2, 1)，2px）；改成原生 JS，键盘选中时也画，中途离开会从当前的位置收回，线的粗细改成参数；用在「下划线展开」
• Inspira UI · Lens许可：MIT（全文）参考了原理（放大的副本加圆形遮罩，以鼠标位置为中心）和出现动画（从 0.58 倍放大、0.3 秒）；代码是本站用原生 JS 重写的。原设计来自 Aceternity UI 的 Lens；用在「放大镜」
• StyleKit · Spotlight Card许可：MIT（全文）改写自它的做法和默认值（卡片上叠一层白色径向光，中心跟着鼠标；进出时 300ms 淡入淡出）；改成原生 JS，光放在内容下面，不用 overflow: hidden；加了手机上按住亮起；光斑大小和亮度改成参数；用在「聚光灯卡片」
• Animation Handbook · Shared Element Transition许可：MIT（全文）改写自它的做法和默认值（FLIP；500ms、cubic-bezier(0.2, 0.7, 0.3, 1)；缩小时反算圆角）；改成原生 JS 的 Web Animations，直接动切换后的元素，不复制；飞行途中压在旁边的内容上面；用在「共享元素过渡」
• Animation Handbook · Parallax Scrolling许可：MIT（全文）改写自它的做法（远的层动得少、近的层动得多；滚动事件里每帧只排一次更新；用位移，减少动态时各层在原位）；改成按区块中心离屏幕中心的距离乘速度（StyleKit 的 parallax-float 也是按距离乘速度），用 translate 属性不碰原来的 transform，可以放在自己会滚动的框里；用在「滚动视差」
• Animation Handbook · Marquee / Ticker许可：MIT（全文）改写自它的做法（内容接上一模一样的副本，挪过一份的宽度就从头再来；按每秒多少像素算一圈多久；鼠标停上去就停；副本不给读屏读）；改成原生 JS 的 Web Animations，副本按外框宽度接够、宽度变了重排，没有脚本和减少动态时换行排开；用在「跑马灯」
• Animation Handbook · Click / Tap Ripple许可：MIT（全文）改写自它的做法（按下的地方放一个圆，放大并变淡，播完拿掉；键盘按下的 click 没有位置，从中心长出来；减少动态时只亮一下）和默认值（600ms、ease-out）；改成原生 JS 的 Web Animations，半径改成到最远那个角的距离，浓度先保持再变淡，圆放在单独一层里裁剪（按钮自己不加 overflow），浓度改成参数；用在「点击涟漪」
• StyleKit · Fade In Up许可：MIT（全文）改写自它的动作（从下方一小段、透明开始，往上回到原位，ease-out）；改成原生 JS，快进入屏幕时才播，内容默认可见，脚本出错时不会把内容藏住；用 translate 属性，不碰元素原来的 transform；默认值从 600ms、20px 调成 800ms、30px，曲线换成缓一点的 ease-out（滚到时还看得见浮上来）；用在「淡入上移」
• Animation Handbook · Typewriter Effect许可：MIT（全文）改写自它的做法（一个字一个字地出现，最后一个字后面跟着光标；读屏读整句，打字的那份不给读屏）；改成原生 JS 的 Web Animations，字一开始就排好、没轮到的透明，遇到标点多停一会儿（原版是随机快慢），打完光标闪两下收起，打完换回原来的文字；用在「打字机」
• StyleKit · Counter Roll许可：MIT（全文）改写自它的做法（每一位一个小窗口，一列数字竖着滚到最终的那一位，只动位置）和缓动；改成原生 JS 的 Web Animations，最终的数字一直写在页面里、只在滚的时候临时拆开，低位多转一两圈、一起停下；用在「数字滚动」
• Animation Handbook · Rolling Numbers许可：MIT（全文）参考它的两条做法：数字等宽（tabular-nums）免得左右晃；滚动的数字不给读屏读，读屏只读最终的数字；用在「数字滚动」
• StyleKit · Hand-Drawn Annotation许可：MIT（全文）改写自它画线的做法（一笔 SVG 线条，pathLength="1" 加 stroke-dasharray: 1，把 stroke-dashoffset 从 1 拨到 0）；画的东西换成本站开屏红笔的那一圈，加了每个圈随机的形状变化，词变大变小时按同一组随机数重画；用在「手绘圈注」

网站本身

• 思源黑体 Noto Sans SC许可：OFL-1.1（全文）开屏的大标题和页面标题（300、900 两档粗细）。用的是 Fontsource 按 Unicode 范围切好的网页字体（@fontsource/noto-sans-sc），只带页面上用到的字所在的切片，没有改字体
• 霞鹜文楷屏幕版 LXGW WenKai Screen许可：OFL-1.1（全文）开屏里红笔写的英文名（大陆字形）。用的是 Chawye Hsu 整理的网页字体包 lxgw-wenkai-screen-webfont（MIT），只带用到的切片，没有改字体