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

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

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

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

自动
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 条独立跳动。音乐播放、可视化、声音反馈。

自动
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 卡片、链接预览、转发样式。

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

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

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

自动
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 插画、沉浸式头图。

移鼠标
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 风。

移鼠标
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

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

自动