codePen前端编码神器_王新焱

个人资料

微博

正文字体大小：大中小

codePen前端编码神器

(2018-08-10 18:01:12)

分类：工具类

codePen (代码笔) 一款前端所见即所得的工具，特别是制作DEMO时，能够带给前端非常棒的体验！它收集了全世界前端达人经典项目进行展示，从中获取到很多的创作灵感，让我们一起来了解下codePen的魅力吧！

CodePen 是一个完全免费的前端代码托管服务，主要功能有：

1. 即时预览。你甚至可以本地修改并即时预览别人的作品。支持多种主流预处理器

2. 快速添加外部资源文件。只需在输入框里输入库名， CodePen 就会从 cdnjs 上寻找匹配的 css 或 js 库。

3. 免费创建模板。支持创建三个模板，不是每个作品都需要从白板开始。

4. 优秀的外嵌体验。在 WordPress 或 Reddit 等支持 oEmbed 的平台上，只要简单地把链接贴入编辑框，

发布后会自动转为嵌入作品。

下面是codePen界面展示

1. 点击“Create”->"NEW Pen" 新建一个代码界面。

2. 新建界面后会有“HTML”、CSS、JS、Content等区域。

3.页面编辑完成后点击“保存”浏览器地址栏会生成页面对应的Url 地址。（可全网访问）

4. 点击“Settings”可以设置要引入的css、js 库文件。

http://s10/mw690/001LhvRkzy7mITKEMOtb9&690
* 下面是codePen官网的一些经典案例展示：

类似功能网站： https://runjs.cn/code http://jsbin.com/?html,output

常用优站： https://tool.lu/ 在线小工具（非常全）

欢迎交流和分享

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report