一招教你在csdn博客上增加动画嵌入、视频插入、代码动画演示

@(TOC)(CSDN动画演示添加教程)

1、动画嵌入

嵌入GIF动图（最适合新手，操作最简单）
GIF是短动画的首选适合展示操作步骤、简单效果，全程不用代码

步骤1：制造/准备GIF动图

如果没有先成的GIF，用免费工具LICEcap制作（Windows/Mac都能用）
1、下载 LICEcap：官网LICEcap下载安装，无需注册。
2、录制 GIF：
打开 LICEcap，拖动鼠标框选要录制的屏幕区域；
点击Record，选择保存路径和文件名（格式选.gif），开始录制；
操作要演示的内容，结束后点击Stop，GIF 就生成好了
3、（也可以用在线工具（如 Convertio）把短视频转成 GIF，上传视频文件后选择输出格式为 GIF 即可）

步骤 2：在 CSDN 上传并嵌入 GIF

1、打开 CSDN 博客的 Markdown 编辑器，把光标放在要插入 GIF 的位置。
2、点击编辑器工具栏的图片图标（像小山和太阳的标志）。
3、在弹出的窗口中选择本地上传，找到刚才制作的 GIF 文件，点击打开。
4、上传完成后，编辑器会自动生成GIF的链接的Markdown 代码，GIF 就嵌入成功了。
5、调整大小：在代码后加尺寸参数，如演示的链接，
的链接

效果演示

2、插入视频（长动画 / 复杂演示）

适合展示超过 10 秒的动画内容，CSDN 支持本地视频上传和外链视频嵌入。

方式 1、本地上传视频**

1、打开 CSDN 编辑器，光标定位到插入位置，点击工具栏的视频图标（摄像机样式）。
2、选择本地上传，选中要上传的视频（支持 MP4、FLV，单文件≤2GB）。
3、等待上传完成，编辑器会自动生成视频播放代码，预览就能看到播放效果。

方式 2：嵌入 B 站 / 腾讯视频（推荐，节省空间）

1、打开 B 站，找到要嵌入的视频，点击分享→嵌入代码，复制生成的代码。
2、回到 CSDN 编辑器，把光标放在要插入的位置，直接粘贴复制的代码。
3、（可选）调整尺寸：修改代码中的width（宽度）和height（高度）数值，如width=“640” height=“360”。

3、代码动画演示（编程/算法动效）

1、适合展示代码执行、算法运行过程，借助第三方工具实现
打开免费工具VisuAlgo，选择要演示的算法，调整参数后生成动画。

2、点击工具的分享按钮，复制嵌入链接。

3、回到 CSDN 编辑器，粘贴嵌入链接，发布后就能在博客里看到算法动画了。

3.1效果

排序演示

总结避坑点

1、GIF 动图建议压缩到10MB 以内，否则上传失败或博客加载慢（可用 TinyPNG 在线压缩）。

2、外链视频要确保原视频是公开状态，否则博客里无法播放。

（可以借助AI工具来辅助进行博客的编写）