MOTION HUB

动效大全

即取即用的动效资产库

可交互 demo、参数可调、一键复制框架无关代码,覆盖 CSS、文字、氛围、滚动、指针与 3D 六大分类,持续扩充。

72 ENTRIES · 6 CATEGORIES · CONTINUOUSLY GROWING

全部动效

72 / 72 ENTRIES
01

3D 折叠面板

3D Accordion

纯CSS实用
02

平滑折叠

Smooth Accordion

现代CSS实用
03

极光背景

Aurora Background

纯CSS氛围
04

脉冲徽标

Badge Pulse

纯CSS轻量
05

3D 按压卡片

3D Press Card

纯CSS实用
06

卡片悬浮

Card Lift

纯CSS实用
07

旋转立方体

Rotating Cube

纯CSS炫
08

混合模式光标

Blend Cursor

需JS炫
09

光标光环

Cursor Glow

需JS氛围
10

拖尾星屑

Cursor Trail

需JS炫
11

进深轮播

Depth Carousel

需JS炫
12

暮色辉光

Ember Glow

纯CSS氛围
13

3D 翻转卡片

Flip Card

纯CSS实用
14

翻牌计数

Flip Counter

需JS炫
15

雾气漂移

Fog Drift

纯CSS氛围
16

故障文字

Glitch Text

纯CSS炫
17

辉光描边卡片

Glow Border Card

现代CSS炫
18

渐变描边按钮

Gradient Border Button

现代CSS炫
19

流光渐变字

Gradient Flow Text

纯CSS炫
20

动态渐变网格

Animated Gradient Mesh

纯CSS氛围
21

渐变轨道

Gradient Orbits

纯CSS氛围
22

网格脉冲

Grid Pulse

现代CSS氛围
23

荧光划过

Highlight Sweep

纯CSS实用
24

横向滚动带

Horizontal Scroll

需JS炫
25

悬停显卡

Hover Reveal Card

纯CSS实用
26

图标切换

Icon Morph

纯CSS轻量
27

遮罩显图

Image Reveal

纯CSS炫
28

输入聚焦线

Input Focus Line

现代CSS实用
29

行级显现

Line Reveal

需JS炫
30

磁吸下划线

Magnetic Underline

需JS实用
31

液态光斑

Liquid Blob

纯CSS氛围
32

液态按钮

Liquid Button

纯CSS轻量
33

磁吸按钮

Magnetic Button

需JS实用
34

磁吸列表

Magnetic List

需JS实用
35

无限跑马灯

Marquee Loop

纯CSS实用
36

滚动投影导航

Scroll Shadow Nav

现代CSS实用
37

霓虹开关

Neon Toggle

纯CSS实用
38

噪点颗粒

Noise Grain

纯CSS氛围
39

数字滚动

Odometer

需JS实用
40

描边空心字

Outline Stroke

现代CSS轻量
41

翻页转场

Page Turn

纯CSS炫
42

视差层次

Parallax Layers

需JS炫
43

视差 3D 场景

Parallax Tilt Scene

需JS炫
44

粒子漂浮

Particle Float

纯CSS氛围
45

环形进度

Progress Ring

现代CSS实用
46

滚动上升显现

Reveal Up

需JS实用
47

涟漪按钮

Ripple Button

需JS轻量
48

扫描线

Scanline

纯CSS氛围
49

滚动进度条

Scroll Progress

需JS实用
50

段落高亮进度

Section Progress

现代CSS实用
51

分段控件

Segmented Control

现代CSS实用
52

硬阴影弹跳

Shadow Pop

纯CSS实用
53

微光骨架屏

Shimmer Skeleton

纯CSS实用
54

扫光按钮

Shine Sweep

纯CSS炫
55

线性开关

Slide Toggle

纯CSS实用
56

滚动吸附分镜

Snap Stories

现代CSS实用
57

3D 粒子球

Particle Sphere

需JS炫
58

追光背景

Spotlight Follow

需JS氛围
59

聚光文字

Spotlight Text

需JS炫
60

逐字入场

Stagger Reveal Text

纯CSS实用
61

星野闪烁

Starfield Twinkle

纯CSS氛围
62

步骤进度

Steps Progress

需JS实用
63

卡片叠放

Sticky Stack

现代CSS实用
64

文字遮罩滚动

Text Mask Scroll

纯CSS炫
65

文字避让

Text Repel

需JS炫
66

字符扰动

Text Scramble

需JS炫
67

3D 倾斜卡片

Tilt Card

需JS炫
68

提示气泡

Tooltip Fade

纯CSS实用
69

打字机

Typewriter

纯CSS实用
70

下划线绘制

Underline Draw

纯CSS轻量
71

波浪文字

Wave Text

纯CSS轻量
72

缩放滚动

Zoom Scroll

需JS炫