~/posts/css-animation-demo.md
在 Hugo 文章里内嵌 CSS 动画 Demo
TL;DR
Hugo 用 shortcode 可以很优雅地内嵌代码演示。这里展示三种方式：
先用一张图确定边界：原生 shortcode、CodePen iframe 和 CodeSandbox 分别适合不同复杂度，也把代码放在不同的执行与隔离位置。
1. 内联 CSS demo（无需外部服务）
直接在文章里跑一个旋转加载动画：
一个渐变色文字动画：
2. 嵌入 CodePen
如果已有 CodePen 作品，用一行 shortcode 嵌入：
text1 行代码
{{< codepen id="你的PenID" height="400" tab="result" >}}3. 嵌入 CodeSandbox
React / Vue 组件用 CodeSandbox：
text1 行代码
{{< codesandbox id="你的沙盒ID" height="450" view="preview" >}}这三个 shortcode 覆盖了大多数代码展示场景，写博客基本不需要其他工具了。