svo.ai · 动效样本库 Effects Gallery

真实可交互 · 持续扩充
用法:看到喜欢的,记住左上角编号(如 A01),告诉我「落地 A01 到 Hero」即可。蓝标=自动播放 · 橙标=移鼠标试试 · 黄标=滚动驱动(此处自动示意)。
显示中:0 个动效
A · 文字动效 标题 / 数字 / 标语的出场
svo.ai
A01

标题流光

Gradient Shimmer

文字上流动的渐变光泽。主视觉大字、Section 标题点睛。

自动
D.E.F.Y
A02

逐字浮现

Split Text Reveal

标题按字符依次浮入。比整体淡入更精致,适合 Hero 大标题。

自动
svo.ai DEFY.
A03

打字机

Typewriter

文字逐字打出 + 光标闪烁。适合标语 / tagline。

自动
0+
entrepreneurs
A04

数字滚动

Count Up

数字从 0 滚到目标值。统计数据、成就、定价。

自动
DEFY
A05

遮罩揭示

Mask Wipe

色块横扫,像幕布拉开露出文字 / 图片。出场有仪式感。

自动
SVO
A06

描边填充文字

Outline Fill

空心描边文字被颜色从左填满。大标题强调。

自动
DEFY
A07

故障文字

Glitch

红蓝错位抖动的赛博故障感。适合科技 / 潮流主题。

自动
DEFY
A08

3D 挤出文字

3D Extrude

多层阴影叠出立体厚度 + 轻微摆动。海报感大字。

自动
DoItForYou
A09

逐词高亮

Word Highlight

高亮块逐词扫过句子,引导阅读重点。

自动
svo.ai
A10

弹性回弹标题

Elastic Pop

带弹性的缩放入场,活泼有张力。

自动
DESIGNED TO DEFY
A11

模糊聚焦

Blur In

从模糊+疏字距渐渐聚焦清晰。优雅的入场。

自动
svo.ai
A12

霓虹发光文字

Neon Glow

霓虹灯般的发光与呼吸闪烁。夜店 / 潮流氛围。

自动
B · 悬停 / 微交互 鼠标交互时的反馈
svo
移鼠标 →
B01

悬停 3D 倾斜

Tilt

卡片 / 图片随光标 3D 翻转。功能卡、定价卡、产品图。

移鼠标
B02

磁吸按钮

Magnetic

按钮被光标「吸」过去 + 光泽扫过。Hero 的 CTA。

移鼠标
svo.ai
B03

边框流光

Gradient Border

卡片描边流动的渐变光。定价卡、重点卡片强调。

自动
移鼠标 →
B04

光标聚光

Spotlight

鼠标位置出现光晕,照亮经过的区域。卡片网格 / 深色 Section。

移鼠标
移鼠标 →
B05

辉光悬停

Glow Hover

悬停时按钮 / 卡片发出柔和辉光。深色背景上的 CTA。

移鼠标
B06

波纹点击

Ripple

点击处扩散水波纹(Material 风)。按钮、列表项反馈。

点我
$49 / mo
详情 →
移鼠标 →
B07

3D 翻牌

Flip Card

悬停翻转显示背面。定价卡、团队卡、FAQ。

移鼠标
IMAGE
移鼠标 →
B08

图片悬停缩放

Image Zoom

悬停时图片在固定框内放大。作品集、产品图、博客封面。

移鼠标
移鼠标 →
B09

按钮填充扫过

Fill Sweep

悬停时底色从左铺满,文字反白。次级按钮的经典做法。

移鼠标
SalesEventPricing移鼠标 →
B10

链接下划线滑入

Underline Slide

悬停时下划线从左滑入。导航、文内链接。

移鼠标
移鼠标 →
B11

图标弹跳

Icon Pop

悬停时图标带弹性放大 / 旋转。功能图标、特性列表。

移鼠标
AI
AI Commerce全栈自动化的电商平台
移鼠标 →
B12

卡片内容上滑揭示

Card Reveal

悬停时说明文字从底部滑入覆盖。作品、功能、团队卡。

移鼠标
移鼠标 →
B13

渐变跟随按钮

Gradient Follow

光晕跟随光标在按钮内移动。有质感的主按钮。

移鼠标
点我 →
B14

按压 3D 按钮

3D Press

有厚度的按钮,点击像真的被按下去。游戏感 CTA。

点我
C · 滚动驱动 随页面滚动发生 · 此处自动示意
DESIGNED
TO
D.E.F.Y.
C01

入场浮现

Scroll Reveal

滚入视野时淡入 + 上移 + 去模糊 + 逐行错峰。现有 v-reveal 升级版。

滚动
DEFY
移鼠标 →
C02

视差景深

Parallax

多层元素以不同速度位移,产生景深。Hero、图文 Section。

移鼠标
01
02
03
C03

粘性堆叠卡片

Sticky Stack

滚动时卡片层层堆叠 / 替换(近年很流行)。步骤、功能罗列。

滚动
C04

阅读进度条

Scroll Progress

顶部细条随滚动填充。长文、文档、落地页。

滚动
C05

导航栏滚动收缩

Navbar Shrink

下滚时导航变矮 / 加底色。常见的吸顶导航。

滚动
01
02
03
04
05
C06

横向滚动区

Horizontal Scroll

垂直滚动驱动内容横向移动。作品集、流程展示。

滚动
C07

SVG 路径描边绘制

SVG Line Draw

线条 / logo 随滚动一笔画出。品牌签名、流程连线。

滚动
SCROLL
C08

滚动渐变变色背景

Scroll Color Shift

背景色随滚动进度过渡。整页氛围随章节变化。

滚动
100%
C09

滚动进度环

Scroll Ring

环形进度随滚动填充。章节指示、完成度。

滚动
IMAGE
C10

图片滚动揭示

Scroll Reveal Image

图片随滚动被裁切框自下而上揭开。图文 Section。

滚动
D · 背景 / 氛围 整体气质
svo.ai
D01

氛围流光背景

Aurora

缓慢漂浮的柔和光团,高级有呼吸感。深色 Section / Hero。

自动
AI COMMERCEAUTOMATEDHUMAN-GUIDEDFULL-STACKAI COMMERCEAUTOMATEDHUMAN-GUIDEDFULL-STACK
D02

跑马灯

Marquee

词条 / logo 无限横向滚动。卖点条、合作品牌墙。

自动
GRAIN
D03

噪点颗粒质感

Film Grain

细微胶片颗粒噪点,增加质感与高级感。整页叠加。

自动
D04

粒子星空

Particles

漂浮闪烁的粒子点。深色 Hero、科技感背景。

自动
GRID
D05

动态点阵网格

Dot Grid

缓慢移动的点阵 / 网格底纹。技术感 Section 背景。

自动
移鼠标划过
D06

鼠标拖尾

Cursor Trail

光标划过留下淡出的拖尾。互动感强的 Hero / 特殊页。

移鼠标
svo.ai
D07

Mesh 渐变流动

Mesh Gradient

多彩柔和渐变缓慢流动。现代 SaaS 主视觉背景。

自动
WAVE
D08

SVG 波浪分隔

Wave Divider

Section 之间的流动波浪分隔线。柔化版块衔接。

自动
D09

浮动几何形状

Floating Shapes

缓慢上下浮动 + 旋转的几何点缀。活泼的留白背景。

自动
svo.ai
D10

渐变光束扫射

Light Beam

斜向光束周期性扫过。深色 Hero、强调横幅。

自动
E · 加载 等待状态
E01

骨架屏

Skeleton

内容加载前的占位 + 微光扫过。列表、卡片、详情页。

自动
E02

旋转加载

Spinner

最经典的环形旋转 loader。按钮加载、页面等待。

自动
E03

跳动圆点

Dots Loader

三点跳动的等待指示。轻量、可爱。

自动
PAGE 1
PAGE 2
E04

页面转场遮罩

Page Transition

色块滑过盖住旧页、露出新页。路由切换过渡。

自动
E05

不定式进度条

Progress Bar

来回滑动的加载条(不知道剩多久时用)。顶部 / 卡片加载。

自动
E06

脉冲方块

Pulse Grid

对角扩散脉冲的方块阵。有节奏感的加载。

自动
E07

渐变环加载

Gradient Ring

渐隐渐变的旋转环,比纯色 spinner 更精致。

自动

AI Commerce

全栈自动化的电商平台

E08

占位渐显内容

Content Fade-in

占位骨架淡出、真实内容淡入。数据到达后的优雅切换。

自动
F · 3D / 特效 更有冲击力的进阶效果
svo
ai
F01

3D 立方体旋转

3D Cube

真 3D 自转立方体。产品 / 品牌的趣味展示。

自动
svo.ai
移鼠标 →
F02

全息卡片

Holographic

随光标倾斜 + 彩虹镭射反光(像球星卡)。VIP / 会员卡。

移鼠标
SVO
F03

3D 翻转文字

Letter Flip

字母逐个 3D 翻面。标题的趣味强调。

自动
F04

磁吸粘连

Gooey / Metaball

两个球靠近时像水银般粘连融合。趣味菜单、品牌动效。

自动
Glass
F05

玻璃拟态

Glassmorphism

毛玻璃半透 + 模糊背景。浮层、定价卡、弹窗。

自动
01
02
03
04
05
F06

3D 旋转画廊

3D Carousel

卡片环绕成圈在 3D 中旋转。作品集、推荐位轮播。

自动
G · 切换 / 转场 内容、视图与组件的进出过渡
A
B
G01

淡入淡出切换

Crossfade

两个内容交叉淡入淡出。最稳妥的视图 / 图片切换。

自动
A
B
G02

滑动切换

Slide

新内容横向滑入、旧内容滑出。步骤、轮播、路由前进/后退。

自动
Tab 1
Tab 2
Tab 3
G03

标签页指示滑动

Tab Switch

选中指示块在标签间平滑滑动。Tab、分段控件、导航。

自动
What is svo.ai?

全栈自动化的 AI 电商平台。

G04

手风琴展开

Accordion

面板高度平滑展开 / 收起 + 箭头翻转。FAQ、设置项。

自动
G05

模态弹出

Modal

遮罩淡入 + 弹窗缩放浮现。对话框、确认框、登录窗。

自动
Menu
G06

抽屉侧滑

Drawer

侧边面板滑入 + 遮罩。移动端菜单、筛选面板、购物车。

自动
01
02
03
G07

轮播淡切

Carousel Fade

多张幻灯片自动淡入淡出轮播。Banner、推荐位、相册。

自动
① Sales
② Event
③ Pricing
④ Contact
G08

列表依次进入

List Stagger

列表项错峰逐条滑入。菜单、搜索结果、Feed。

自动
01234567890
01234567890
G09

数字翻牌

Flip Number

数字像翻页时钟 / 里程表滚动。倒计时、价格、统计。

自动
G10

卡片展开

Expand Card

卡片原地展开成大卡 / 详情(共享元素过渡)。作品、商品详情。

自动
H · 数据 / 进度 进度、图表、统计的可视化
完成度78%
H01

进度条(确定值)

Progress Bar

已知百分比的进度填充。上传、完成度、技能条。

自动
85%
H02

环形进度

Ring Percent

环形百分比 + 中心数值。完成率、占比、评分。

自动
H03

柱状图生长

Bar Chart

柱子从底部依次升起。数据展示、报表、对比。

自动
H04

仪表盘

Gauge

指针扫到目标值的仪表。评分、速度、用量。

自动
H05

星级评分

Star Rating

星星依次点亮带弹跳。评价、推荐、好评展示。

自动
H06

折线图绘制

Line Chart

折线一笔画出 + 面积渐显。趋势、增长曲线。

自动
1
2
3
H07

步骤进度

Stepper

多步骤依次点亮 + 连线填充。注册、结账、引导流程。

自动
月度营收
$0
▲ 12.4% vs 上月
H08

统计卡片

Stat Card

数字滚动 + 趋势的 KPI 卡。仪表盘、概览页。

自动
I · 图片 / 媒体 图片展示与交互(此处用渐变占位)
I01

Ken Burns 平移缩放

Ken Burns

图片缓慢缩放 + 平移,静图变"活"。Hero 背景、封面。

自动
AFTER
BEFORE
移鼠标 →
I02

前后对比滑块

Before / After

拖动分割线对比两张图。修图、改造、产品对比。

移鼠标
svo.ai
I03

圆形遮罩展开

Circle Reveal

图片 / 内容从圆心扩散显现。开场、聚焦强调。

自动
移鼠标 →
I04

灰度转彩色

Grayscale → Color

悬停时图片由黑白恢复彩色。作品集、品牌墙、团队照。

移鼠标
移鼠标 →
I05

拍立得堆叠散开

Polaroid Stack

悬停时叠放的照片扇形散开。相册、回忆、画廊入口。

移鼠标
移鼠标 →
I06

图片框内视差

Image Parallax

图片随光标在框内轻移,产生景深。图文卡、特性展示。

移鼠标
IMAGE
I07

色条揭示图片

Block Reveal

遮挡色条依次升起露出图片。画廊入场、图片切换。

自动
移鼠标 →
I08

双色调悬停

Duotone

悬停在双色调与原图间切换。潮流封面、专题头图。

移鼠标
J · 趣味 / 特效 更花哨、更有记忆点的玩法
🎉 Success!
J01

彩带纸屑

Confetti

周期性撒落的彩色碎片。支付成功、达成成就、庆祝时刻。

自动
svo.ai
J02

霓虹边框

Neon Border

边框发光呼吸 + 变色。游戏、夜店、潮流主题的强调框。

自动
$ deploy --prod ✓
J03

终端打字

Terminal

命令行逐字敲入 + 光标。开发者产品、技术文档、Hero。

自动
DEFY 🔥AI 真香svo.ai 牛!好用 ✦
J04

弹幕滚动

Danmaku

评论 / 标签从右向左飘过。直播感、社区互动、热度展示。

自动
J05

像素方块拼入

Pixel Build

方块随机闪现拼成图块。加载、马赛克揭示、科技感。

自动
J06

3D 透视隧道

Tunnel

同心框向中心收缩,营造无限隧道纵深。开场、加载、跳转。

自动
svo
J07

旋转渐变光环

Rotating Halo

头像 / 图标背后旋转的渐变光晕。AI、高亮、VIP 标识。

自动
IMAGE
J08

RGB 抖动故障图

RGB Split

红蓝通道错位抖动的故障图。封面、转场、潮流视觉。

自动
K · 导航 / 菜单 导航栏、菜单、入口的交互
K01

汉堡菜单 ↔ X

Hamburger Toggle

三横线平滑变叉号。移动端菜单开关。

自动
K02

下拉菜单

Dropdown

展开时菜单项错峰滑入 + 箭头翻转。导航、操作菜单。

自动
🔍
K03

底部标签栏

Tab Bar

激活图标上浮 + 变色,轮流高亮。移动端底部导航。

自动
HomeProductsDetail
K04

面包屑导航

Breadcrumb

路径层级依次淡入。深层页面的位置指示。

自动
+
K05

圆形展开菜单

Radial / Speed Dial

主按钮旋转,子操作扇形弹出。悬浮操作按钮(FAB)。

自动
Dashboard
Orders
Products
Settings
K06

侧边栏激活指示

Sidenav Indicator

高亮块在菜单项间滑动。后台侧边导航。

自动
K07

Mega Menu

Mega Menu

多列大面板下拉。内容丰富的顶部导航。

自动
🔔3
K08

通知红点徽标

Notification Badge

新消息红点弹入 + 铃铛轻摇。导航图标、消息中心。

自动
L · 表单 / 输入 输入框、开关、校验的微交互
Email 地址
L01

浮动标签

Floating Label

聚焦时占位标签上浮缩小。节省空间的现代输入框。

自动
L02

开关 Toggle

Toggle Switch

滑块切换 + 底色过渡。设置项、偏好开关。

自动
L03

勾选动画

Checkbox Check

勾号一笔画出 + 方框填充。复选框、任务完成、同意条款。

自动
Emailyk@svo.ai
L04

输入下划线展开

Input Underline

聚焦时下划线从中心展开 + 文字键入。极简表单。

自动
无效的邮箱
请输入有效的邮箱地址
L05

校验失败抖动

Validation Error

出错时输入框抖动 + 变红 + 提示。表单校验反馈。

自动
月付 $49
季付 $129
年付 $399
L06

单选按钮

Radio Select

选中点带缩放填充,在选项间轮换。套餐、单选题。

自动
••••••••••
强 · Strong
L07

密码强度条

Password Strength

随输入由红→黄→绿增长。注册、改密码。

自动
L08

搜索框展开

Search Expand

点击图标展开成输入框。导航栏搜索、紧凑工具栏。

自动
M · 卡片 / 容器 卡片布局与容器级交互
M01

Bento 网格

Bento Grid

不规则网格,悬停格子放大突出。功能展示、作品集首屏。

移鼠标
$29/mo
热门$49/mo
$99/mo
M02

价格卡推荐高亮

Pricing Highlight

推荐档浮起 + 高亮 + 角标。定价页转化引导。

自动
svo.ai
移鼠标 →
M03

卡片光跟随

Spotlight Card

光晕随光标在卡内移动。深色功能卡、定价卡的质感。

移鼠标
3
2
1
M04

卡片堆滑走

Swipe Stack

顶卡滑走露出下一张(Tinder 式)。推荐流、引导卡。

自动
A
B
C
D
M05

卡片网格翻转

Flip Grid

网格卡片错峰 3D 翻面。功能矩阵、图标墙。

自动
svo.ai移动光标看景深
移鼠标 →
M06

3D 视差分层卡片

Parallax Card

卡片随光标倾斜,内部元素按深度浮动。产品卡、特性卡。

移鼠标
新订单 #1042
收到一条好评
$到账 $49.00
M07

通知卡堆叠

Notification Stack

新通知从顶部滑入压叠。消息中心、实时动态。

自动
概览详情
月活 12,400 · 增长 12%
套餐:Pro · 续费 6/30
M08

标签页卡片

Tab Card

卡内 Tab 切换 + 指示滑动 + 内容横向淡切。详情面板。

自动
N · 反馈 / 提示 通知、气泡、状态反馈
保存成功!
N01

Toast 通知

Toast

提示从底部滑入、停留后淡出。操作成功/失败的轻提示。

自动
点这里开始免费试用
N02

Tooltip 气泡

Tooltip

悬停弹出带箭头的小提示。图标说明、帮助文案。

移鼠标
❤️
N03

点赞爆心

Like Burst

点赞时爱心放大 + 粒子四散。社交点赞、收藏、好评。

自动
⧉ 复制✓ 已复制
N04

复制成功反馈

Copy Success

点击后按钮变绿 + 文案切换。复制链接、代码、优惠码。

自动
N05

成功对勾

Success Check

圆圈弹入 + 勾号绘制。支付完成、提交成功的确认页。

自动
📭还没有任何订单+ 创建第一单
N06

空状态

Empty State

无数据时的插画 + 引导按钮浮现。列表空、搜索无果。

自动
N07

Popover 气泡菜单

Popover

触发后弹出带箭头的浮层菜单。更多操作、上下文菜单。

自动
😡😟😐🙂😍
N08

表情评分

Emoji Rating

表情依次点亮放大。满意度调查、反馈打分。

自动
O · 电商 / 产品 电商场景的转化型动效
🛒1
O01

加入购物车飞入

Add to Cart

商品飞入购物车 + 角标 +1。下单转化的爽点反馈。

自动
$99$49
O02

降价闪动

Price Drop

原价划掉 + 新价弹入。促销、限时折扣的视觉冲击。

自动
库存紧张仅剩 3 件
O03

库存紧迫进度

Stock Urgency

库存条快速减少,制造紧迫感。限量、秒杀。

自动
👁 快速查看
移鼠标 →
O04

商品快速查看

Quick View

悬停浮出查看按钮 + 图片放大。商品网格、列表。

移鼠标
立减 ¥50满 ¥199 可用
领取
O05

优惠券撕开

Coupon

票券造型 + 撕口轻晃。领券、优惠码、礼券。

自动
O06

颜色选项切换

SKU Swatch

选色环高亮 + 商品同步换色。规格选择、配色预览。

自动
5★
4★
3★
2★
O07

评分分布条

Rating Bars

各星级占比条增长。商品评价、口碑汇总。

自动
⚡ 限时秒杀
02:45:18
O08

限时倒计时

Countdown

秒位翻牌跳动。秒杀、抢购、活动截止。

自动
P · AI / 科技 AI 对话、数据、科技感
🤖
How can I help?
P01

AI 逐字回复

AI Typing

机器人气泡逐字打出回复。客服、AI 助手对话界面。

自动
🤖
P02

输入中三点

Typing Indicator

对方/AI 正在输入的气泡三点。聊天、评论加载。

自动
P03

语音波形

Voice Wave

音频条随声跳动。语音输入、播客、AI 语音助手。

自动
1011010
0100110
1101001
0010110
1001101
0110010
P04

矩阵数据雨

Matrix Rain

字符列下落的黑客帝国效果。科技、加密、数据主题。

自动
P05

神经网络脉冲

Neural Net

节点脉冲 + 连线流动。AI、机器学习、智能主题装饰。

自动
P06

雷达扫描

Radar Scan

扫描线旋转 + 目标闪现。检测、搜索、地图定位。

自动
AI 生成中…
P07

AI 生成中

Generating

占位行渐变流动 + 闪烁。AI 生成内容、流式响应等待。

自动
const ai = svo();
ai.train('data');
await ai.run();
// ✓ deployed
P08

终端代码流

Code Stream

代码逐行出现 + 语法高亮。开发者产品、技术演示。

自动
Q · 节日 / 营销 活动、促销、节庆氛围
🧧 恭喜发财
Q01

红包雨

Red Packet Rain

红包从天而降。春节活动、抽奖、节日营销。

自动
Q02

抽奖转盘

Lucky Wheel

转盘旋转减速停下。抽奖、幸运大转盘、互动营销。

自动
🎁
Q03

礼盒开启

Gift Box

盒盖弹开 + 礼物冒出。开箱、领奖、惊喜揭晓。

自动
❄️ Winter Sale
Q04

雪花飘落

Snowfall

雪花缓缓飘落 + 横向漂移。冬季 / 圣诞主题。

自动
🎆 Celebrate
Q05

烟花绽放

Fireworks

随机位置烟花爆开。庆典、达成、年度回顾。

自动
限时 5 折
Q06

丝带横幅

Ribbon Banner

燕尾丝带 + 轻摆。促销标语、活动横幅。

自动
🎉 中奖 ¥88
刮一刮
Q07

刮刮卡

Scratch Card

涂层刮开露出奖品。刮奖、盲盒、互动彩蛋。

自动
商品卡
NEW
Q08

角标飘带

Corner Ribbon

角标丝带 + 光泽扫过。新品、热卖、限量标记。

自动
R · 游戏化 成就、奖励、激励机制
🏆
成就解锁!
R01

成就解锁

Achievement

徽章旋转弹入 + 光芒。解锁奖章、里程碑达成。

自动
LV.5LV.6EXP
R02

等级经验条

XP / Level Up

经验条充满 → 升级。会员等级、成长体系、积分。

自动
已认证
VERIFIED
R03

徽章盖章

Stamp

印章砸下 + 轻震。认证、已完成、审核通过。

自动
×8COMBO!
R04

连击 Combo

Combo

连击倍数弹跳。答题连对、连续打卡、游戏化激励。

自动
💰
R05

宝箱开启

Treasure Chest

箱盖弹开 + 金光 + 奖励冒出。开宝箱、领奖励。

自动
1234567🎁
R06

签到日历

Daily Check-in

连续签到格子依次点亮。日活、留存、连续打卡奖励。

自动
🪙+100
R07

金币奖励

Coin Reward

金币弹入 + 数值跳出。积分到账、奖励发放。

自动
🥇 Alex9,820
🥈 Sam8,730
🥉 You7,610
R08

排行榜高亮

Leaderboard

榜首金色脉冲突出。竞赛、积分榜、销售龙虎榜。

自动