CodePen

适合什么任务

CodePen 提供在线开发与预览环境。想尝试按钮动效、卡片布局或最小复现问题时，可以把想法缩成一个小示例。

从一个按钮开始

创建一个 Pen，写按钮结构与样式，再增加点击切换状态的逻辑。用预览检查交互，也检查键盘能否操作。保存后可分享示例，让别人更容易理解问题。

公开与付费边界

核实时，免费方案支持公开 Pens，每个 Pen 最多 3 个文件；隐私控制、素材托管等属于付费能力。免费内容默认公开，不要放入密钥或客户私有资料。社区代码的复用仍需确认许可证，完整项目也需要自己的测试与构建流程。

---

资料核实：2026-10-04。根据官方说明整理；上手示例为建议流程，未作完整实测。功能与额度以官网当前说明为准。

参考：CodePen · 方案与隐私规则