在 Hugo 文章里内嵌 CSS 动画 Demo

Hugo 用 shortcode 可以很优雅地内嵌代码演示。这里展示三种方式：

先用一张图确定边界：原生 shortcode、CodePen iframe 和 CodeSandbox 分别适合不同复杂度，也把代码放在不同的执行与隔离位置。

1. 内联 CSS demo（无需外部服务）
#

直接在文章里跑一个旋转加载动画：

纯 CSS 旋转加载器

一个渐变色文字动画：

CSS 渐变文字

如果已有 CodePen 作品，用一行 shortcode 嵌入：

`1`	`{{< codepen id="你的PenID" height="400" tab="result" >}}`

React / Vue 组件用 CodeSandbox：

`1`	`{{< codesandbox id="你的沙盒ID" height="450" view="preview" >}}`

这三个 shortcode 覆盖了大多数代码展示场景，写博客基本不需要其他工具了。

作者

Liu ZhuoQi

AI 应用开发工程师（Agent 方向）。使用 Go、Python 与 React 将 Agent 能力做进真实产品，记录从开发、测试到生产交付的实践。