动效实验站

纯 CSS 与 GSAP 动效实验:玻璃、视差、3D 与交互动画。

UI Lab, 3D, CSS

Neon Glass · 3D Cards

交互式 3D 卡片实验室:玻璃质感、棱镜切面、聚光灯卡组,支持键盘/拖拽导航。

打开实验
GSAP, 3D, Interaction

GSAP rotateY Draggable

通过水平拖拽代理控制 3D cards 的 rotateY 动画,带惯量、边界/自由旋转模式。

打开实验
CSS, Parallax, Hover

Pure CSS Parallax Card

纯 CSS 实现的悬停视差卡片效果,无需 JavaScript。

打开实验
CSS, Animation

After Sign-Off

纯 CSS 动效展示。

打开实验
Canvas, Physics, Interaction

Strings

用源码字符织成的布料模拟:拖拽、拨动,看文字帘幕在重力里晃动。

打开实验
GSAP, Scroll, Typography

GSAP Wind-Blown Text

用 data 属性驱动的 GSAP ScrollTrigger 文字:字母随滚动被风吹散或聚拢。

打开实验
CSS, Modal, Motion

24 Modal Effects

24 种模态框入场:卷轴展开、翻转、弹跳与对角线滑入,全部用 CSS transform 完成。

打开实验