模糊入场文字
标题逐字从模糊变得清晰，每个字落定时微微上升。
网页动效，复制即可生成。
可交互的网页动效演示。每个动效都附带源代码和一段提示词，可直接粘贴到 AI 编程工具中，语言跟随你正在阅读的版本。
共 95 个动效
显示 95 个
文字 16
每月访客
里程表数字
每一位数字都是一条 0–9 的竖向数字带，滚动到新的数值，右侧的数字滚得更远。
让设计感觉 安静
轮播词
标题里的一个词向上滑出，下一个词从下方滑入，词槽宽度随之调整。
打字机
一句句文字在闪烁的光标后逐字打出，停顿后删除，再继续下一句。
波浪文字
文字一个接一个地跳起，让一道柔和的波浪不断穿过整句话。
12,480已入驻团队
数字递增
关键数字进入视野时从零开始增长，最后缓缓停下，让最终的数值落得有分量。
信号丢失
故障文字
悬停时文字瞬间撕裂成错位的彩色切片，像信号中断一样，随后又干净地复原。
为动而生
流动渐变文字
一道暖色渐变缓缓流过标题文字，让标题在不移动的情况下保持一点生气。
好的动效， 先被感受到，才被看见。
荧光笔标记
句子进入视野时，一道荧光笔从关键词后方划过，把视线引到重点上。
深夜营业
霓虹闪烁
像一根有点老化的灯管：亮起时会抖几下，平时稳定发光，偶尔又暗掉一拍。
描边文字填充
悬停时镂空的描边文字从下往上被填满颜色，像液体在字里慢慢上升。
向下滚动 ↓
滚动文字显现
随着滚动，文字一个接一个亮起来，让读者按照自己滚动的节奏读完一句话。
北京
翻牌显示
像机场的出发信息牌，每一块翻牌依次翻到下一个词，带一点错开，让变化像波浪一样掠过。
每一帧都是一次取舍
遮罩逐行升起
标题的每一行依次从一条看不见的边缘后面升起，像排好的字一行行落位。
文字解码
悬停时，每个字会快速闪过随机字符，再从左到右依次定格，像屏幕在解码。
滑动下划线
悬停链接时下划线从左侧画入，移开时从右侧离开，像一条线从文字下方穿过。
按钮 15
按住 1.2 秒
长按确认
按住按钮时，填充色会逐渐铺满；中途松开会退回，按住到底才会确认。
点赞爆发
点击爱心时，它会先压扁再弹回并填满颜色，同时向外迸出一圈小火花。
加载到成功
请求进行时文字滑走、换成加载圈；成功后对勾会自己画出来。
扫光按钮
悬停或聚焦时，一道窄窄的光带从按钮上滑过一次。
bun add gsap复制反馈
复制图标弹成一个对勾，文字随之确认，然后两者恢复原样，让你知道剪贴板已经生效。
旋转渐变边框
一段亮色弧线沿着按钮边缘绕圈，在按钮本身不动的情况下吸引注意。
汉堡菜单变关闭
三条菜单线折成一个 X：上下两条先在中间汇合再旋转，中间那条悄悄消失。
果冻按钮
悬停时按钮像被戳了一下的果冻，挤压、拉伸，晃几下再停稳。
磁吸按钮
按钮会向指针方向倾斜，文字移动得更多一些；指针离开后再平稳回位。
立体按压
按钮立在一块实心底座上，按下时整块沉下去，像一颗按到底的实体按键。
涟漪按压
从按下的位置扩散出一圈柔和的圆形并逐渐消失，让按钮在被点击的地方给出回应。
滚动文字按钮
悬停时按钮文字逐字向上滚走，被下方的副本替换，从左到右形成一道快速的波浪。
纸飞机发送按钮
点击发送后，纸飞机从按钮上飞走，文字滑成带对勾的“已发送”，随后一切复位。
滑动确认
把滑块拖过轨道才算确认；中途松手会弹回原位，误触永远不会触发操作。
弹出提示
短暂停顿后，提示气泡带着一点弹性从图标按钮上方弹出，帮得上忙又不碍事。
表单与控件 9
浮动标签输入框
标签在空输入框里像占位文字一样，聚焦或输入后会浮到边框上。
滑块气泡
数值气泡跟随滑块圆钮移动，拖动时放大并朝移动方向倾斜。
错误抖动
提交无效的代码时，输入框会左右抖动并在下方显示错误，像在摇头说不。
弹性开关
开关圆钮在移动时会拉长成胶囊形，到另一侧后恢复圆形，轨道同时填满颜色。
动态复选框
勾选待办时方框带着挤压感填满，画出对勾，任务文字也从左到右被划掉。
展开搜索框
圆形的搜索图标点击后伸展成完整的输入框，内容为空时离开又会收回去。
人数
2
数字步进器
加一时数字向上滑入，减一时向下滑入，让变化的方向既能看到也能感受到。
滑动标签指示器
一块高亮在标签之间滑动并改变宽度，而不是每个标签各自亮起。
星级评分
星星会填充到你悬停的那一颗，选中的那颗轻轻弹一下，全部基于原生单选按钮。
卡片 11
翻转卡片
卡片以 3D 方式翻转，露出背面的详细信息；再次点击翻回正面。
方案工作室版RM 49 / 月项目与导出数量不限
聚光卡片
一团柔光跟着指针在卡片内移动，并点亮指针所在位置的边框。
01吉隆坡
滑动卡片堆
把最上面的卡片向两侧拖动，它会随手势倾斜；甩得够远就会飞出，下一张卡片随即上前。
聚焦淡化其他卡片
悬停在一张卡片上时它会微微抬起，其他卡片变淡变柔，让注意力落在一个选项上。
★
限量版
编号 042 / 300
镭射卡片
一层变幻色彩的镭射光泽跟着指针在卡面上流动，像在灯下转动一张收藏卡。
骨架屏微光
灰色占位形状先撑住布局，一道柔光从上面扫过；数据到达后，真实内容以淡入方式替换。
01黎明
02正午
03黄昏
04深夜
05风暴
居中聚焦轮播
左右滑动一排会吸附到中心的卡片，位于中间的卡片放大到完整尺寸，其余的向后退。
灵感
草稿
定稿
卡片扇形展开
一叠整齐的卡片在悬停时像手里的扑克牌一样扇形展开，一眼就能看到下面有什么。
项目 1
项目 2
项目 3
项目 4
项目 5
项目 6
卡片依次出现
卡片组滚动进入视野时，卡片一张接一张地升起就位，让网格以顺序出现而不是整块弹出。
会员工作室通行证
光泽倾斜卡片
卡片会朝指针方向做 3D 倾斜，同时一块光斑在表面滑动，像真实的反光。
堆叠通知
新通知从底部滑入，把旧通知推到后面，叠成一摞逐渐缩小、会自动清空的卡片。
图片 5
SVG 与图形 7
背景 10
彩纸爆发
点击后喷出一束彩纸，彩纸翻滚着因空气阻力减速，然后落出画面。
在点阵上移动指针
响应式点阵
点阵会在指针附近膨胀并被推开，像手掌下的一片针。
安静地流动
流动渐变
三团柔和的色块在标题后方彼此滑过，让背景有生气又不会抢走注意力。
夜间特刊
散景光斑
柔和的失焦光斑在内容后面飘动、呼吸，像透过镜头看到的城市灯光。
实时信号
字符雨
一列列字符以不同速度从屏幕上方流下，每一列明亮的头部后面拖着逐渐消失的尾巴。
走进群山
向下滚动 ↓视差分层
滚动时山丘、太阳和标题以不同速度移动，让一幅平面画面产生纵深。
把指针移到这里
星座粒子场
粒子在画布上缓慢漂移，当指针经过附近时，粒子之间会连出细线。
直播中
脉冲光环
光环以均匀的节奏从直播标识向外扩散，像信号从中心向外广播。
下一站
复古网格地平线
发光的网格地面在地平线下源源不断地朝你滚来，给首屏一种向前行进的感觉。
移动你的指针
波浪线条
细细的水平线条像平静的海面一样缓缓起伏，指针经过的地方会鼓起一道波峰。
布局 16
展开式面板
一排窄面板中，被悬停或聚焦的那块会变宽并展示内容，其余面板让出空间。
- 品牌设计
- 网页设计
- 动效
- Next.js
- 文案
- SEO
- 电商
- 数据看板
- 原型
- 落地页
- 设计系统
无限跑马灯
两排标签朝相反方向无缝滑动，悬停时暂停。
在框内滚动 ↓01需求 02草图 03开发 04上线
粘性堆叠卡片
滚动时，每张卡片都停在比上一张略低的位置，前面的卡片缩小，整齐地叠成一摞。
不用。大多数动效都是纯 CSS，GSAP 只在编排时间线时有帮助。
会。每个演示在该设置下都会关闭或减弱动作。
可以。粘贴到任意 AI 编程工具里即可重建这个效果。
平滑手风琴
面板展开到内容的自然高度后又能收回，无需固定 max-height，箭头也随之转动。
分享到
底部弹出面板
面板从底部边缘升起，盖在变暗的屏幕上，就像手机 App 呈现快捷选项的方式。
命令面板
搜索面板以快速缩放弹出，输入即筛选，用方向键切换时高亮块在结果之间滑动。
01
首页
幕布转场
两块彩色面板扫过来盖住页面，内容在后面切换，然后面板扫开露出新页面。
程序坞放大
指针靠近时程序坞里的图标逐渐变大，离开时又缩回去，像桌面程序坞一样把相邻图标推开。
文字
卡片
按钮
文字
按钮
卡片
文字
卡片
可筛选网格
选择筛选条件后，被隐藏的项目缩小消失，其余项目平滑滑到新位置，而不是生硬地跳过去。
滚动隐藏顶栏
向下滚动阅读时顶栏滑走，一往上滚想找它，它就立刻滑回来。
向下滚动 ↓
01规划
02设计
03开发
04上线
横向滚动区块
向下滚动时区块被固定，一排面板横向滑过，滑到尽头后页面才继续往下。
模态对话框
对话框在逐渐变暗的背景上浮起放大，离开时原路返回，全部基于原生 dialog 元素。
0% 已读
设计平静的界面
阅读进度条
顶部的细条随着你往下读不断填满，让读者随时知道还剩多少。
推挤式侧边栏
导航侧边栏从左侧滑入，把页面推到一旁，页面略微缩小变暗，表明它退到了后面。
- 购物车
- 地址
- 支付
- 完成
步骤进度
连接线朝下一步填充，完成的圆点会弹成一个对勾，让流程走到哪一步一目了然。
顶部加载条
页面加载时一条细条在顶部慢慢爬行，越走越慢，加载完成后冲到尽头再淡出。
光标 6
从演示到你的项目
- 在预览区试用动效。每个动效都会响应指针、点击、拖拽或滚动。
- 复制提示词。提示词跟随网站语言，演示文字与提示词保持一致。
- 粘贴到 Claude、Cursor 或任意 AI 编程工具中，再按需调整数值。