news 2026/1/8 8:08:00

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
一招教你在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工具来辅助进行博客的编写)

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2025/12/14 0:56:13

AI算力:驱动智能时代多元计算与高效调度的基础

各行各业正被人工智能发展浪潮以前所未有的力道进行重塑,而且支撑其运作的底层基础是算力。换种通俗易懂的说法,AI算力是指用来执行人工智能算法,对海量数据予以处理以及解析所需要的计算能力。它不是一项简单的硬件指标,而是包含…

作者头像 李华
网站建设 2025/12/14 0:56:12

AI知识库的构建:从数据采集、处理到高效检索的全流程解析

AI知识库的搭建以及运用属于一项具备系统性的工程项目,它的关键之处在于怎样以高效且精准地把领域方面的知识给予人工智能系统,从而让其拥有专业领域范畴内的认知以及推理能力。这个进程一般被称作“知识库投喂”或者“知识灌注”,它并非仅仅…

作者头像 李华
网站建设 2025/12/25 8:42:39

Git工作流程指南: 基础 Git 操作

基础 Git 操作 仓库初始化 # 创建新的仓库 git init# 克隆已经存在的仓库 git clone <repository_URL>文件操作 # 将文件添加到暂存区&#xff08;Staging Area&#xff09; git add <file_name> # 添加单个文件 git add . …

作者头像 李华
网站建设 2025/12/14 0:51:58

Modelsim联合高云ip仿真流程

一、改变工作器件库打开modelsim&#xff0c;调整工作器件库&#xff1a;modelsim --> File --> Change Directory --> 选择modelsim的安装目录C:\modeltech64_10.7&#xff08;我装在C盘&#xff09;&#xff0c;点击选择文件夹&#xff0c;如下图。二、创建libirary…

作者头像 李华
网站建设 2025/12/14 0:51:26

69.学习复盘-21天核心知识点梳理与记忆技巧-附思维导图

69 学习复盘:21 天核心知识点梳理与记忆技巧 你好,欢迎来到第 69 讲,也是我们整个课程的倒数第三讲。 在过去的 20 多天里,我们一起经历了一段信息量巨大、充满挑战但也收获满满的 DDD 学习之旅。我们从最基础的概念,一路走到了复杂的企业级案例和面试技巧。 在即将结束…

作者头像 李华
网站建设 2025/12/14 0:51:24

68.进阶学习资源-书籍博客社区推荐-避免走弯路附学习路径图

68 进阶学习资源:书籍、博客、社区推荐(避免走弯路) 你好,欢迎来到第 68 讲。 恭喜你,坚持到了这里!完成了整个课程的学习,你已经拥有了一套完整的、从战略到战术的 DDD 知识体系,并具备了将其应用于实战和面试的能力。 但是,任何一门课程,都只是为你打开一扇门。…

作者头像 李华