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。

滚动
IMAGE
C11

滚动缩放图片

Scroll Zoom

图片随滚动渐渐放大。Hero 背景、沉浸图文。

滚动
01
02
03
C12

滚动吸附切换

Scroll Snap

整屏吸附式翻页。全屏 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、强调横幅。

自动
D11

浮动气泡

Bubbles

气泡缓缓上浮。水下、清爽、灵动的氛围背景。

自动
D12

极光波带

Aurora Bands

极光色带缓缓飘动。深色 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

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

自动
E09

翻转方块加载

Cube Loader

方块 3D 翻转的加载指示。比 spinner 更有立体感。

自动
E10

波浪点加载

Wave Dots

多点波浪起伏。轻盈的等待指示。

自动
E11

轨道旋转加载

Orbit Loader

双点绕轨旋转。简洁的双色加载器。

自动
E12

斜纹进度条

Striped Bar

斜纹滚动的进行中进度条。下载、上传、处理中。

自动
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 中旋转。作品集、推荐位轮播。

自动
¥
$
F07

3D 翻转硬币

Coin Flip

金币持续 3D 翻转。奖励、货币、抽奖。

自动
点我 →
F08

立体挤出按钮

Extrude Button

有厚度的实体按钮,按下回弹。游戏化 CTA。

点我
svo
svo
F09

3D 折叠卡片

Fold Card

卡片上半翻折展开。揭示、展开详情、信封。

自动
DEFY
F10

3D 文字摆动

3D Text

带厚度的立体文字左右转动。海报、标题大字。

自动
F11

3D 翻转方块阵

Flip Tiles

网格方块对角波浪式 3D 翻面。马赛克、图标墙过场。

自动
移鼠标 →
F12

3D 倾斜画廊

Tilt Gallery

悬停时卡片组 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

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

自动
A
B
G11

圆形扩散转场

Circle Wipe

新页从圆心扩散覆盖旧页。路由切换、揭晓。

自动
svo.ai
G12

百叶窗转场

Blinds

竖条百叶依次收起露出内容。图片切换、揭幕。

自动
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 卡。仪表盘、概览页。

自动
H09

分段进度

Segmented Progress

分段依次点亮的进度。多步骤、章节完成度。

自动
H10

温度计

Thermometer

纵向液柱上升。目标达成、热度、募集进度。

自动
H11

对比双向条

Diverging Bars

左右两组对比展开。男女、正负、AB 对比。

自动
$48.20k
实时营收
H12

实时跳动数字

Live Ticker

数值实时小幅跳动 + 涨跌变色。股价、实时统计、监控。

自动
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

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

移鼠标
01
02
03
I09

轮播指示点

Carousel Dots

幻灯片切换 + 底部点指示。Banner、图集、引导页。

自动
I10

缩略图画廊

Thumbnail Gallery

主图随缩略图切换。商品详情、相册、作品集。

自动
IMAGE
I11

模糊渐清加载

Blur Up

低清占位渐渐聚焦清晰(LQIP)。图片懒加载体验。

自动
I12

瀑布流网格

Masonry

不等高图块错峰浮入。作品集、图墙、Pinterest 风。

自动
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

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

自动
🎉 Party!
J09

表情雨

Emoji Rain

表情符号从天而降。庆祝、互动、节日气氛。

自动
!
J10

抖动提醒

Shake

元素周期抖动吸引注意。错误、提醒、未读、催促。

自动
svo.ai
J11

霓虹灯闪烁

Neon Flicker

霓虹灯管偶尔故障闪烁。复古酒吧、赛博、夜店风。

自动
svo.ai
J12

色相旋转文字

Hue Shift Text

渐变文字色相持续轮转。炫彩标题、活力主视觉。

自动
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

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

自动
概览
功能
定价
K09

锚点导航点

Scrollspy

当前章节的小圆点高亮跟随。单页导航、文档目录。

自动
1234
K10

分页器

Pagination

页码激活态轮换。列表翻页、轮播指示。

自动
🔍 输入命令…⌘K
➕ 新建订单
📊 查看报表
⚙️ 设置
K11

命令面板

Command Palette

⌘K 唤起的快捷命令面板。效率工具、全局搜索。

自动
K12

返回顶部

Back to Top

下滚后浮现的回顶按钮 + 箭头跳动。长页面常用。

自动
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

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

自动
预算 $49 – $129
L09

范围滑块

Range Slider

拖动滑块调节数值。价格筛选、音量、参数设置。

自动
移鼠标 →
L10

星级评分输入

Star Rating Input

悬停点亮到该星(真交互)。评价打分、满意度。

移鼠标
4
8
2
6
L11

验证码输入

OTP Input

验证码格子逐位填入 + 高亮。登录验证、二步验证。

自动
☁️
拖拽文件到此上传
L12

文件上传

File Upload

拖拽区 + 上传进度。附件、头像、批量上传。

自动
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 切换 + 指示滑动 + 内容横向淡切。详情面板。

自动
svo.ai
移鼠标 →
M09

卡片悬停浮起

Hover Lift

悬停时卡片上浮 + 阴影加深。最基础好用的卡片反馈。

移鼠标
什么是 svo.ai?

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

M10

FAQ 折叠卡

Accordion Card

卡片式问答展开收起。FAQ、帮助中心、设置项。

自动
官网改版
68% · 还剩 3 天
M11

项目进度卡

Progress Card

卡内嵌进度条。项目看板、任务卡、课程进度。

自动
注册账号
第 1 天
上架商品
第 3 天
首笔成交
第 7 天
M12

时间线卡

Timeline

竖向时间线节点依次浮现。历程、流程、更新日志。

自动
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

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

自动
N09

加载转成功

Loading → Success

转圈加载完成后变对勾。提交、支付、保存的全流程反馈。

自动
确认删除?
取消确认
N10

确认对话框

Confirm Dialog

遮罩 + 对话框弹出确认。删除、退出、危险操作二次确认。

自动
点这里开始 👆
N11

引导脉冲点

Onboarding Hotspot

功能上的脉冲红点 + 提示气泡。新手引导、新功能提示。

自动
N12

顶部横幅通知

Banner Notice

顶部公告条滑入。促销、系统公告、Cookie 提示。

自动
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

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

自动
SMLXL
O09

尺码选择器

Size Selector

尺码选中态轮换高亮。规格、尺码、选项选择。

自动
2+
O10

数量加减器

Quantity Stepper

加减按钮 + 数字反馈。购物车、表单数量输入。

自动
O11

收藏心动

Wishlist Toggle

爱心收藏点亮 + 弹跳。收藏、心愿单、喜欢。

自动
🔥
0+
本月已售
O12

销量火爆

Hot Sales

火焰摇曳 + 销量滚动。爆款、热销、限量抢购氛围。

自动
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

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

自动
分析需求…
检索知识库…
生成回答…
P09

AI 思考步骤

Reasoning Steps

推理步骤逐条点亮。Agent 思维链、处理流程透明化。

自动
P10

数据流传输

Data Flow

数据包沿链路流动。同步、传输、节点通信。

自动
3D
P11

全息扫描

Hologram Scan

扫描线掠过的全息体。科技产品、3D 预览、未来感。

自动
AI 置信度94%
P12

AI 置信度

Confidence Meter

置信度条由红到绿增长。模型评分、匹配度、可信度。

自动
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

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

自动
Q09

气球上升

Balloons

彩色气球缓缓升起。庆祝、生日、达成、欢迎页。

自动
5折
Q10

星爆促销标

Starburst

爆炸星形促销贴 + 脉动。折扣、新品、爆款角标。

自动
Q11

灯笼摇摆

Lantern

节日灯笼轻轻摇晃。春节、中秋、传统节日氛围。

自动
🌸 春季特惠
Q12

花瓣飘落

Petals

樱花花瓣随风飘落。春季、浪漫、清新主题活动。

自动
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

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

自动
❤️ HP88 / 100
R09

血条 HP

HP Bar

血条受击减少、回血恢复。游戏、能量值、生命值。

自动
R10

技能冷却

Cooldown

扇形遮罩消退到技能就绪。游戏技能、限频操作、CD。

自动
R11

抽卡稀有光

Gacha Card

卡片翻出 + 稀有紫光闪耀。抽卡、开包、稀有掉落。

自动
+50 XP
完成每日任务
R12

任务完成领奖

Quest Complete

任务打勾 + 奖励飘出。每日任务、成就奖励、积分到账。

自动
S · 图表 / 可视化 数据图表的入场与动态
S01

饼图

Pie Chart

扇形旋转缩放入场。占比、构成、分类统计。

自动
2.4kTotal
S02

甜甜圈图

Donut Chart

多段环形 + 中心汇总。分类占比、仪表盘核心指标。

自动
S03

雷达图

Radar Chart

多维能力多边形缩放展开。技能、评测、对比维度。

自动
S04

热力图

Heatmap

网格按强度着色 + 依次浮现。活跃度、贡献图、分布。

自动
访问 10k
加购 4.2k
下单 1.8k
支付 920
S05

漏斗图

Funnel

转化各环节逐层收窄。漏斗分析、转化率、流程留存。

自动
AI 自动化 电商 增长 DEFY svo.ai 全栈
S06

词云

Word Cloud

关键词按权重浮现。标签云、热词、主题概览。

自动
$48.2k▲ 12%
S07

迷你趋势线

Sparkline

数值旁的微型趋势线绘制。KPI 卡、列表行内图。

自动
A B C D
S08

气泡图

Bubble Chart

气泡按值缩放浮现 + 漂浮。三维数据、分布、市场份额。

自动
S09

面积图

Area Chart

曲线绘制 + 渐变面积填充。趋势、流量、增长曲线。

自动
S10

堆叠柱状图

Stacked Bar

多段堆叠柱依次生长。构成对比、分类汇总。

自动
S11

同心多环

Multi Ring

多层圆环各自填充。多指标对比(Apple 健身环风)。

自动
A 52%BC
S12

矩形树图

Treemap

按占比划分的矩形块依次浮现。层级数据、空间占比。

自动
T · 媒体 / 播放器 音视频播放控件
T01

播放/暂停切换

Play / Pause

播放与暂停图标切换 + 按压。播放器主控按钮。

自动
1:123:45
T02

播放进度条

Player Progress

已播 + 缓冲 + 拖动头。音频、视频播放器。

自动
🔊
T03

音量滑块

Volume Slider

音量条拖动调节。播放器、设置、混音控件。

自动
T04

音频波形播放

Waveform Play

波形随播放进度从左变色。播客、音乐、语音消息。

自动
3:45
移鼠标 →
T05

视频卡预览

Video Card

悬停封面放大 + 播放键放大。视频列表、课程、媒体库。

移鼠标
T06

黑胶唱片旋转

Vinyl Spin

唱片旋转 + 唱针。音乐播放、专辑、复古主题。

自动
LIVE
T07

直播 LIVE 徽标

Live Badge

红点呼吸脉冲。直播中、实时、在线状态。

自动
T08

均衡器

Equalizer

多频段 EQ 条独立跳动。音乐播放、可视化、声音反馈。

自动
缓冲中…
T09

视频缓冲

Buffering

视频中央转圈缓冲。加载、卡顿、等待视频流。

自动
T10

倍速切换

Playback Speed

循环切换 1× / 1.5× / 2× 倍速。播放器、课程、录音。

自动
欢迎来到 svo.ai全栈 AI 电商平台Designed to D.E.F.Y.
T11

字幕逐句

Subtitles

字幕随播放逐句切换。视频、教程、可访问性。

自动
Designed to DEFY
T12

迷你播放器

Mini Player

封面 + 标题 + 进度的迷你播放条。音乐、播客底栏。

自动
U · 社交 / 互动 社交场景的互动反馈
f🐦💬
U01

分享展开

Share Expand

主按钮旋转,社交图标扇形弹出。分享、转发入口。

自动
ABCD+5移鼠标 →
U02

头像叠组

Avatar Stack

重叠头像悬停展开。协作者、参与者、点赞用户。

移鼠标
+ 关注✓ 已关注
U03

关注按钮

Follow Button

关注 ↔ 已关注状态切换。社交、订阅、加好友。

自动
❤️0
U04

点赞计数滚动

Like Count

爱心点亮 + 计数滚动。点赞、收藏、人气值。

自动
太赞了!🔥
已下单 💳
求教程~
U05

评论冒泡

Comments

评论依次弹入。实时评论区、弹幕、互动墙。

自动
Hi @al
U06

@提及下拉

Mention

输入 @ 弹出用户建议。评论、协作、社交输入。

自动
👤
U07

在线状态

Online Status

头像 + 绿点呼吸。在线、活跃、可联系状态。

自动
svo.ai
The Digital Entrepreneur Platform

svo.ai · Designed to D.E.F.Y.

U08

分享卡片浮起

Share Card

社交分享预览卡浮动。OG 卡片、链接预览、转发样式。

自动
👍❤️😂😮😢
U09

表情反应条

Reactions

悬停弹出表情选择(FB 风)。点赞、表态、情绪反馈。

移鼠标
方案 A62%
方案 B28%
方案 C10%
U10

投票结果

Poll

选项结果条填充 + 百分比。投票、问卷、AB 测试展示。

自动
👤
U11

故事环

Story Ring

渐变环旋转的头像(IG Story 风)。新动态、未读故事。

自动
Hi 👋
输入消息…
U12

聊天发送

Chat Send

发送按钮脉冲 + 消息气泡飞出。IM、客服、评论框。

自动
V · 装饰 / 排版 排版细节与装饰元素
V01

动态分割线

Divider

分隔线从两端展开 + 中心图标旋入。章节分隔。

自动
Designed to D.E.F.Y.
— svo.ai
V02

引用浮现

Blockquote

大引号 + 引文渐入。金句、证言、推荐语。

自动
AI电商自动化全栈DEFY
V03

标签组弹入

Tag Chips

标签依次弹性出现。分类、技能、关键词标签。

自动
V04

认证徽章脉冲

Verified Badge

认证标 + 扩散光环。蓝 V、官方、已验证。

自动
Svo.ai 是为数字创业者打造的全栈 AI 电商平台,让一切自动化、人性化地运转起来。
V05

首字下沉

Drop Cap

段首大写字母装饰。文章、杂志、editorial 排版。

自动
全栈 AI
数字创业
V06

记号笔高亮

Highlighter

记号笔风格的背景涂抹扫过。重点词强调、手账风。

自动
自动化运营
人工辅导
全栈电商
$49 起步
V07

清单标记

Checklist

清单项依次滑入打勾。卖点、功能清单、待办。

自动
就点这里 ↓START
V08

手绘箭头标注

Hand-drawn Arrow

手绘箭头一笔画向目标 + 批注。引导、教程、强调 CTA。

自动
V09

滚动指示器

Scroll Indicator

鼠标滚轮 + 箭头提示下滑。首屏「向下滚动」引导。

自动
svo.ai
V10

渐变标题下划线

Gradient Underline

标题下方渐变线绘制展开。Section 标题、强调短语。

自动
1注册账号
2上架商品
3开始赚钱
V11

序号列表

Numbered List

带序号圆圈的步骤列表依次出现。流程、教程、规则。

自动
限时优惠
V12

括号标题

Bracket Title

括号从两侧合拢框住标题。栏目名、专题、强调标签。

自动
W · 光标 / 指针 自定义光标与指针交互
移鼠标 →
W01

圆环光标

Ring Cursor

圆点即时跟随 + 外环延迟追上。品牌官网的自定义光标。

移鼠标
W02

磁吸光标

Magnetic Cursor

光标圆环 + 靠近时按钮被吸附。CTA、交互热点。

移鼠标
🏠🔍📊💬⚙️
移鼠标 →
W03

Dock 放大

Dock Magnify

悬停图标放大上浮(macOS Dock 风)。工具栏、应用坞。

移鼠标
W04

光标变形查看

Cursor Morph

悬停链接时光标放大并显示「VIEW」。作品集、画廊。

移鼠标
点我 / 自动涟漪
W05

点击涟漪

Click Ripple

任意点击处扩散水波。整页点击反馈、互动彩蛋。

点我
svo.ai
移鼠标 →
W06

聚光灯揭示

Spotlight Reveal

暗幕下光标处照亮,移动揭示内容。彩蛋、寻宝、互动揭晓。

移鼠标
✋ 拖动我
W07

跟随标签光标

Cursor Label

光标旁跟随操作提示标签。可拖拽、可缩放区域的引导。

移鼠标
👆
W08

手势提示

Gesture Hint

手指移动 + 点击涟漪的引导演示。新手引导、操作教学。

自动
拖选这段文字
就像被选中一样
W09

文字选中高亮

Text Selection

蓝色拖选高亮扫过文字。复制提示、重点标注。

自动
W10

抓手拖拽

Grab & Drag

抓手抓住元素拖动。看板拖拽、排序、画布平移。

自动
移鼠标画画 →
W11

画笔轨迹

Paint Trail

光标划过留下彩色画笔轨迹。创意页、涂鸦、签名板。

移鼠标
移鼠标 ✨
W12

emoji 光标

Emoji Cursor

光标变 emoji 并留下拖尾。趣味页、活动页、儿童向。

移鼠标
X · 等距 / 3D 场景 2.5D、立体与样机
svo
X01

等距卡片

Isometric Card

2.5D 等距卡片悬浮。功能介绍、SaaS 插画风。

自动
X02

立体翻书

Book Flip

书页 3D 翻动。电子书、杂志、作品翻阅。

自动
移鼠标 →
X03

3D 层叠展开

Stacked Layers

悬停时图层在 Z 轴拉开。技术栈、图层、架构展示。

移鼠标
X04

手机样机

Phone Mockup

手机框 + 屏内 Feed 自动滚动。App 展示、产品截图。

自动
X05

笔记本样机

Laptop Mockup

笔记本框 + 屏内图表跳动。后台、数据看板展示。

自动
X06

等距方块塔

Iso Blocks

等距方块在 Z 轴起伏堆叠。积木、模块化、构建感。

自动
X07

3D 悬浮卡片组

Floating Cards

多卡不同深度漂浮。Hero 主视觉、功能聚合展示。

自动
移鼠标 →
X08

视差场景

Parallax Scene

多层场景随光标景深位移。Hero 插画、沉浸式头图。

移鼠标
svo.ai
X09

浏览器窗口样机

Browser Mockup

带地址栏的浏览器框 + 内容。网站展示、产品截图。

自动
X10

3D 旋转环组

Gyroscope Rings

多轴圆环立体旋转(陀螺仪/原子)。科技、AI、加载。

自动
X11

平板样机

Tablet Mockup

平板框 + 屏内网格内容浮现。App、面板、作品展示。

自动
X12

线框球体

Wireframe Sphere

经纬线框球体旋转。全球化、网络、数据地球。

自动
Y · 边框 / 描边 边框与轮廓的动态
svo.ai
Y01

边框光点行进

Border Runner

光点沿边框循环奔跑。聚焦卡片、活跃状态强调。

自动
svo.ai
Y02

渐变流动边框

Gradient Border

边框上线性渐变横向流动。重点卡、推荐位描边。

自动
Y03

虚线蚂蚁行进

Marching Ants

虚线沿框流动。选区、裁剪框、拖拽目标提示。

自动
对焦
Y04

对焦边框

Focus Corners

四角取景框 + 边框展开。相机对焦、扫描、选中。

自动
svo.ai
Y05

画框绘制

Frame Draw

边框一笔画出。卡片入场、内容框强调。

自动
svo.ai
Y06

双线脉冲边框

Double Pulse

内框固定 + 外框扩散脉冲。提醒、聚焦、心跳强调。

自动
75%
Y07

边框进度环绕

Border Progress

进度沿矩形边框填充。卡片级进度、倒计时框。

自动
svo.ai
移鼠标 →
Y08

角括号展开

Corner Brackets

悬停时四角括号向外扩张。选中、聚焦、科技 HUD 风。

移鼠标
svo.ai
Y09

霓虹描边

Neon Outline

纯描边霓虹发光呼吸。深色主题强调框、赛博风。

自动
Y10

虚线旋转圆环

Dashed Spin

虚线圆环持续旋转。加载、扫描、待处理标记。

自动
svo.ai
Y11

四边依次描边

Sequential Draw

上右下左四条边依次画出。卡片入场、聚焦动画。

自动
svo.ai
Y12

圆点流动边框

Dotted Flow

圆点沿边框循环流动。虚线选区的活泼变体。

自动
Z · 实验 / 创意 更前卫、更好玩的实验性效果
svo
Z01

液态 Blob 变形

Blob Morph

有机形状缓慢流动变形。AI、生物、柔性品牌图形。

自动
移鼠标 →
Z02

磁性网格点

Magnetic Dots

点阵被光标吸引、靠近变亮放大。互动背景、创意 Hero。

移鼠标
PREMIUM
Z03

镜头光晕扫过

Lens Flare

带星芒的光斑横扫。高端质感、解锁、徽章高光。

自动
Z04

水波涟漪表面

Water Ripple

水滴同心圆扩散。平静、灵感、点滴汇聚的意象。

自动
BUILDDEFY
Z05

故障切换文字

Glitch Swap

两词以故障效果互相切换。标语轮换、赛博主题。

自动
svo.ai
Z06

彩虹流动波

Rainbow Wave

全光谱渐变持续流动。Pride、活力、缤纷主题背景。

自动
移鼠标 →
Z07

弹性果冻按钮

Jelly Button

悬停时像果冻一样挤压回弹。俏皮 CTA、游戏化按钮。

移鼠标
Z08

星空曲速

Hyperspace

星星从中心向外加速飞驰。进入、加载、科幻跳转。

自动
72%
Z09

液体波浪填充

Liquid Fill

容器内液体带波浪上升。进度、电量、水位、募集。

自动
Z10

无限镜像隧道

Infinity Mirror

发光框向中心无限退缩。纵深、传送、科幻入口。

自动
SYSTEM
Z11

故障扫描文字

Glitch Scanline

扫描线掠过 + 偶发故障撕裂。终端、监控、赛博文字。

自动
Z12

波浪点阵网格

Wave Grid

点阵按正弦波起伏流动。互动背景、声音可视化、科技。

自动