Animation Patterns
Ready-to-copy CSS animation patterns. Each includes CSS keyframes and Tailwind utility class code.
12 animations
聚光灯卡片
鼠标在卡片上方移动时,呈现手电筒照亮卡片局部的光影跟随效果。
磁吸悬浮
鼠标靠近目标元素时,元素会像被磁铁吸引一样向鼠标指针方向产生弹性位移。
涟漪点击
点击时从触发点产生向外扩散的圆形涟漪效果,Material Design 风格的经典交互反馈。
光晕指针
在鼠标附近显示克制的柔和光晕,增强空间感但不替换系统光标。
指针轨迹
多个小点延迟追随鼠标,形成短暂轨迹,适合演示页和创意页面。
靠近显现
鼠标靠近时才显示辅助操作或信息,让密集界面保持安静。
文字排斥
文字字符在鼠标靠近时轻微避让,适合标题和品牌字标的演示效果。
图像扭曲
鼠标经过图像时产生局部液态位移,适合高表现力作品集和专题页。
鼠标视差层
多层元素按不同强度响应鼠标位置,形成轻量空间深度。
拖拽物理
拖拽对象带有惯性、吸附或回弹,提升画布类工具的手感。
上下文光标
根据不同区域显示简短状态提示,例如拖拽、查看、复制或禁用。
3D 透视倾斜
鼠标在卡片上移动时,卡片随鼠标位置产生 3D 透视倾斜效果,营造沉浸式的空间深度感。