news 2026/7/26 13:32:14

一招教你在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进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/25 17:51:40

Csharp学习笔记——常用类、集合框架、泛型、字典精华总结

思维导图总结不知不觉在Csharp的学习已经投入快1个月了,这1个月下来学习的东西还是挺多的,前面也分享了两篇博客,这是我的第三篇博客了,这周学习了很多东西,主要学习了集合框架、字典、泛型等等,所以一周一…

作者头像 李华
网站建设 2026/7/26 15:55:31

下载神器downkyi:5分钟掌握任务优先级管理技巧

下载神器downkyi:5分钟掌握任务优先级管理技巧 【免费下载链接】downkyi 哔哩下载姬downkyi,哔哩哔哩网站视频下载工具,支持批量下载,支持8K、HDR、杜比视界,提供工具箱(音视频提取、去水印等)。…

作者头像 李华
网站建设 2026/7/19 20:30:37

63.测试策略-领域模型测试集成测试实操方法-附测试框架选择

63 测试策略:领域模型测试、集成测试的实操方法 你好,欢迎来到第 63 讲。 在软件工程领域,有一句经典名言:“未经测试的代码,都是不可信的。” 这对于承载着核心业务逻辑的 DDD 应用来说,更是至理名言。 一个设计精良的领域模型,除了要具备业务表达力、灵活性和高性能…

作者头像 李华
网站建设 2026/7/25 11:21:41

1.2 主流大模型初探:解锁OpenAI、Gemini、Claude的强大能力

1.2 主流大模型初探:解锁OpenAI、Gemini、Claude的强大能力 在AI编程的世界里,大型语言模型(LLM)是驱动一切的核心引擎。不同的大模型各有特色,适用于不同的场景。本节课将带你深入了解目前市场上最主流的三大AI模型:OpenAI系列、Google Gemini和Anthropic Claude,帮助…

作者头像 李华
网站建设 2026/7/26 2:07:49

MFC消息处理机制

消息处理流程MFC消息分类各个消息处理函数均应以afx_msg void 为函数型式。标准Windows 消息//the_class.H class the_class: public base_class {public:...afx_msg void OnPaint();//消息处理函数声明DECLARE_MESSAGE_MAP()//消息映射声明 };//the_class.CPP //消息映射 BEGI…

作者头像 李华