今天发现了一个神仙前端网站 CodePen，里面的开源项目简直一个比一个厉害。无论是找灵感、学特效，还是直接复制别人的作品来研究，都特别方便。

CodePen 是什么

  • CodePen 是一个完全免费的前端代码托管服务，它的首页每天都会放上很多有趣好看的项目 😍
  • 官网入口：https://codepen.io/

引用我在百度上看到的描述：

与 GitHub Pages 相比，它最重要的优势有：

  • 即时预览：你可以本地修改并即时预览别人的作品。
  • 支持多种主流预处理器：从不需要手写生产级别的代码，无论是 Jade、LESS、Sass，还是 CoffeeScript、ES6+（Babel），都能尽情使用。
  • 快速添加外部资源：只需在输入框里输入库名，CodePen 就会从 cdnjs 上寻找匹配的 CSS 或 JS 库。
  • 免费用户支持创建三个模板：不是每个作品都需要从白板开始。
  • 优秀的外嵌体验，且支持 oEmbed：在 WordPress、Reddit 等支持 oEmbed 的平台上，直接把链接贴进编辑框，发布后就会自动转为嵌入作品。

当然，它不是 Git，不能记录提交历史。不过它有 fork 功能，通常被用于"备份他人优秀作品，防止未来作品消失或者变了样子"。

结语

CodePen 特别适合两类人：一是想快速验证前端想法的开发者，二是给个人博客找灵感的站长。我之前博客里的旋转小人、Loading 动画等效果，灵感大多来自这里。希望自己有一天也能写出这么好看的前端 🙃