动效篇（8）－－codepen~让设计师爱上码农

gggggg.jpg

you can get, not only share!

codepen

（一）前端工程师的dribbble长什么样？

把HTML，CSS和JavaScript分成三栏，底下则是网页的即时呈现
codepen是前端编辑网站，不用保存文件在本地，就可以写HTML和CSS代码。当我们在网站上保存代码的同时即刻可以进行在线预览，这样的交互方式不但能会让初学者建立信心而且也会让大家觉得友好。我们可以在CodePen中做些有趣的实验。

代码爱好者发布的动效

（二）codepen可以解决什么问题？

1.制作师：制作可以从上面找灵感，技术实现也可以一并学习，可作为优秀前端的demo展示～支持流行技术，如SASS, 我们可以无需自建平台，利用CodePen进行快速学习~
2.设计师：设计可以通过codepen爱上敲代码～
3.both：可以让设计师和制作更好的沟通～

（三）codepen-Design Patterns

Design Patterns是Codepen里的一个模块，把一些交互的代码集合分类整理到了一起，设计师和制作师可以很方便的从里面找自己想制作的动效样式，就可以很明确的参考样式。

Design Patterns在页面最下边

例如loading的样式

实时更新&打包下载

（四）动效鉴赏

写这些动画所用的代码难易程度不同，有些heml和css（sass）就可以实现，单有的还要用到js。

作者Andy Tran,编写语言HTML(Jade)/CSS(SCSS)/JS(Babel)

作者Rupert Breheny,编写语言HTML/CSS/JS

作者The Suitcase,编写语言HTML(Jade)/CSS(SCSS)

作者Fabrizio Cuscini,编写语言HTML(Jade)/CSS(SCSS)

作者Massimiliano Ranauro,编写语言HTML/CSS(SCSS)

（五）基础文章链接

Sass/Compass篇（1）－－让CSS的开发变得简单和可维护

Ruby篇－－Mac OS X 上安装Ruby运行环境

动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～

动效篇（2）－－CSS极简动效鉴赏与制作（良心制作～）

动效篇（3）－－CSS极简动效鉴赏与制作）

动效篇（4）－－CSS极简动效鉴赏与制作（难度＋1！）

动效篇（5）－－CSS极简动效鉴赏与制作（实用性＋1！）

动效篇（6）－－CSS极简动效鉴赏与制作（难度＋2！）

动效篇（7）－－CSS极简动效鉴赏与制作（难度＋1！）