CodePen最佳实例分享

原文地址： Chris Coyier’s Favorite CodePen Demos

原文日期： 2013年8月13日

翻译日期： 2013年8月21日

CodePen：

Build, Explore, and Teach the Web, Instantly.

CSDN 果然不是适合写博客的地方，iframe全部被屏蔽了，建议效果去原文地址看吧。

CodePen网站绝对比你所见过的传统代码分享站点要给力很多.
CodePen 可以在线显示源码以及最终的运行结果, 提供协作工具的载入,而且每周都有新的特性发布.
但CodePen的设计者Chris Coyier如何评价CodePen上面用户的工作成果呢? 当我提及让Chris分享一些他喜爱的Pens(此处指代码)时——他很乐意的接受了!

译者注: W3school也可以在线提交代码运行(JS,CSS,HTML)
http://www.w3school.com.cn/tiy/t.asp

David让我就CodePen分享一些最喜爱的应用，给他的博客写篇文章。

这是一个艰巨的任务！因为有如此多的应用源码。

我计划选取几个月来萦绕心怀的那些应用来介绍，如果你想要获取更多，每天我都会准备一大堆我真正喜爱的Pens出来。

大鲸鱼

我喜爱这个应用的简洁。那你会想他是如何搭建起来的，那仅仅是一些简单的形状，一个接一个的跟随着鼠标堆积在其他的上面而已。但是低延迟，阴影效果以及响应灵敏以及所有的一切都会让玩这个游戏的人满足的。

Demo示例请看: 大鲸鱼|SVG|JS (作者: Diego Leme)

--> 晃动你手中的小老鼠，鲸鱼在找吃的?

弹窗(Avgrund)

Hakim的Demo总是那么完美，所以要挑一个出来是如此的困难。我觉得挑选这个应用的原因是他实在是太实用了。我简直不敢相信真的见到了视觉深度效果控制得如此之好的模态弹出窗口。

Demo示例请看： Avgrund

--> 点击按钮，看看不同的效果

撕裂纱布

我们有充分的理由证明这是CodePen 150万个画面中最受欢迎的。

在重力和摇晃以及纱布自身的折叠、裂开、掉落到地板，以及所有的一切组合之下,和它的交互是如此令人惊叹的真实。

演示地址: Tearable Cloth

-->使用鼠标左键来撕扯、用右键来切割，如果太卡，会自动降低物理精度。

丝带

Justin Windle 创建了很多令人兴奋的交互应用。当你在web平台上看到这东西如此流畅的表现，是否会感觉到生活又美好了一些？

Demo 地址： Ribbon

-->移动你的鼠标，丝带将随你而变

火药进度条

我很享受那些小粒子的Demo,特别是像Jack Rugile的火药进度条这种实用性很棒的东西。有这种进度条，我宁愿页面的加载速度像蜗牛一样。

演示地址：Light Loader

-->看看这火花般的进度条:

机械草地

Tim Holman 的这只代码笔立刻就将我带到了另一个奇幻的世界，比如爱丽丝梦游仙境的蒸汽朋克版。

演示地址： Mechanical Grass

-->管道的世界?

个人页面

当我看到Tim Pietrusky的这个应用时，突然觉得CodePen真的不错。

我花了些时间和4ae9b8 团队在线交流,我们在CodePen上结识了对方。他们是 Hugo Giraudel, Mads Cordes (>:D), Sara Soueidan, Ana Tudor, Fabrice Weinberg & Joshua Hibbert.
和你们一起度过的时光非常棒，我爱你们！

演示地址：Personal Page

--> 个人博客、主页什么的,译者不知道!!

Twitter新概念Button

按钮的3D的CSS效果也可以如此简洁、经典、高效.作者： Bennett Feely

演示地址： 

http://codepen.io/bennettfeely/pen/ErFGv

-->移动鼠标，见证奇迹!!

三角形视觉错觉

Ana Tudor 在教学程序上很强悍,她在此揭示了可视化demo是如何制作的。这个经典而棘手的视觉错觉是我最喜欢的一个例子。

演示地址：Triangle Optical Illusion

-->怎么面积多出了一块??

非常感谢 Chris 分享他最喜爱的代码示例！他在自己平台上尽职的工作是非常了不起的，希望你能喜欢CodePen并能在上面找到适合你自己的应用！也希望你因此受到启发而把精彩的应用分享到CodePen,下次的最爱分享有你哦。

--

关于Chris Coyier

CodePen设计者,CSS-Tricks作家,ShopTalk博主