🦞 动效库

龙虾老师 × AI团队联合出品

74种动效 · 点击触发 · 纯CSS+JS

💡 点击卡片 触发动效预览 · 代码按钮 查看源码

🎛️ 交互组件

下拉、标签、手风琴、弹窗、涟漪、翻转等完整交互动画

▼ 点击展开菜单
📋 复制链接
✏️ 编辑
🗑️ 删除
01 · Dropdown Morph
下拉形态形变
按钮平滑变形展开为下拉面板
📊 概览面板内容
📝 详情面板内容
⚙️ 设置面板内容
02 · Tab Switch
标签切换淡入滑出
标签切换时内容淡入滑出
📌 侧边栏内容
03 · Slide Panel
侧滑面板
侧边栏从右向左滑入，弹簧缓动
✨ 3D 悬浮
04 · 3D Tilt Card
3D倾斜光标高光
卡片跟随光标做立体倾斜
正面
背面
05 · Flip Card
翻转3D
点击卡片沿Y轴180度翻转
🚀
06 · Click Scale
缩放阴影
点击弹性放大+投影加深
📦 使用方式▼
点击"复制代码"粘贴到项目中即可
🔧 技术栈▼
纯CSS + 少量JS，零依赖
🎯 适用框架▼
React / Vue / Svelte / 原生HTML
07 · Accordion
手风琴高度形变
折叠展开时高度顺滑过渡
✨ Fade
08 · Fade Toggle
淡入淡出缩放
元素淡入时同步缩放展开
09 · Modal Transition
模态弹窗弹性缩放
弹窗弹性缩放+毛玻璃背景
10 · Button Morph
填充弹性
点击时从左向右填充背景色
11 · Ripple Effect
涟漪Material
点击位置生成圆形涟漪扩散
⚙️
12 · Rotate Icon
旋转齿轮
点击时图标旋转360度
第一项 · 渐入
第二项 · 交错
第三项 · 弹性
第四项 · 衔接
13 · Stagger List
交错列表入场
列表项依次交错入场
0%
14 · Progress Bar
进度条渐变
进度条平滑填充+百分比同步
15 · Skeleton Loading
骨架屏加载
内容加载时闪烁骨架占位符
16 · Bounce
弹跳物理
点击时球体弹跳两次
17 · Shake
抖动表单验证
输入框验证失败时左右抖动
0
18 · Counter Animation
计数器数字滚动
数字从起始值平滑滚动到目标值
19 · Color Shift
色彩变换形变
点击颜色渐变+形状变化
🦞 龙虾老师 ✨ 龙虾老师视觉库 🎨 74种动画效果 ⚡ 零依赖高性能 🦞 龙虾老师 ✨ 龙虾老师视觉库 🎨 74种动画效果 ⚡ 零依赖高性能
20 · Marquee
跑马灯无限滚动
内容水平无限循环滚动

✨ 文字动效

光芒、霓虹、彩虹、故障、打字机等文字视觉效果

GLOW
点击
光芒
品牌色光晕脉冲
NEON
点击
霓虹灯
闪烁霓虹效果
彩虹
点击
彩虹渐变
渐变色流动
PULSE
点击
彩虹脉冲
七彩渐变循环脉冲
GLITCH
点击
故障
赛博故障抖动
打字机效果
点击
打字机
逐字打出
EXPAND
点击
展开
字间距展开出现
SWEEP
点击
扫光
高光扫过文字

🎯 入场动画

淡入、滑入、缩放、弹跳、翻转、3D等元素出场效果

FADE
点击
淡入
经典渐隐出现
FADE↑
点击
淡入上浮
淡入+上移动
←SLIDE
点击
左滑入
从右侧滑入
SLIDE→
点击
右滑入
从左侧滑入
SLIDE↑
点击
上滑入
从下方滑入
SLIDE↓
点击
下滑入
从上方滑入
SCALE
点击
缩放
弹力缩放进入
BOUNCE
点击
弹跳进入
弹性缩放出现
ROTATE
点击
旋转进入
旋转弹出
FLIP
点击
3D翻转
Y轴翻转入场
FLIP↑
点击
X轴翻转
上下翻转入场
CARD
点击
翻牌
卡片翻转出现
BOOK
点击
翻书
书页翻开效果
PAGE
点击
翻页
从右翻入
ZOOM
点击
缩放弹跳
缩放弹跳出现
SPOT
点击
聚光灯
圆形遮罩展开
BLUR
点击
模糊出现
从模糊到清晰
OPEN
点击
水平展开
从中心向两侧展开
REVEAL
点击
轻快旋转
旋转+缩放入场
WIPE
点击
文字擦拭
从左到右擦出
POP
点击
弹出
弹性弹出
ROLL
点击
卷入
旋转滚入
TWIST
点击
扭转进入
扭转缩小到正常
3D
点击
3D翻转
双轴立体翻转

⚡ 物理效果

果冻、弹性、挤压、震动、摆动等物理模拟效果

JELLY
点击
果冻
弹性形变
SHAKE
点击
弹性摇摆
垂直挤压摇摆
SQUEEZE
点击
挤压
XY轴弹性形变
SHAKE
点击
震动
水平抖动
SWING
点击
摆动
钟摆摇晃
PULSE
点击
脉冲
缩放脉冲
扭曲
点击
扭曲
水平扭曲恢复
WOBBLE
点击
摇摇欲坠
左右摇摆减速
FLASH
点击
闪烁
明暗闪烁
重力
点击
重力下落
逐字掉落
波浪
点击
水波
逐字弹性伸缩
💥
点击
粒子爆炸
粒子向四周飞散

🔤 逐字动效

逐字弹跳、缩放、翻转、波浪、螺旋等字母级动画

BOUNCE
点击
逐字弹跳
字依次跳起
SCALE
点击
字母缩放
逐字旋转缩放
WAVES
点击
平静波浪
逐字上下波动
SCALE
点击
文字缩放
逐字弹出
Rainbow
点击
彩虹弹跳
逐字弹跳变色
FLIP
点击
翻转
逐字X轴翻转
FADE
点击
淡入缩放
逐字淡入放大
WAVE
点击
波浪
逐字摆动
螺旋
点击
螺旋
逐字螺旋进入
粒子
点击
粒子文字
模糊缩放逐字

🦞 龙虾老师视觉库 · React Bits 灵感 · 纯CSS+JS · 74种效果

🦞 龙虾老师
🦞 已有 - 人使用过此工具 · 今日 - 次访问