原文地址: 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博主

CodePen最佳实例分享的更多相关文章

  1. Siege——多线程编程最佳实例

    在英语中,“Siege”意为围攻.包围.同时Siege也是一款使用纯C语言编写的开源WEB压测工具,适合在GNU/Linux上运行,并且具有较强的可移植性.之所以说它是多线程编程的最佳实例,主要原因是 ...

  2. 免费手机号码归属地API查询接口和PHP使用实例分享

    免费手机号码归属地API查询接口和PHP使用实例分享 最近在做全国性的行业分类信息网站,需要用到手机号归属地显示功能,于是就穿梭于各大权威站点之间偷来了API的接口地址. 分享出来,大家可以用到就拿去 ...

  3. Dropbox可伸缩性设计最佳实践分享

    http://www.infoq.com/cn/news/2012/11/dropbox-scale-bestpractice Dropbox的运维工程师Rajiv,跟大家分享了可伸缩性设计的最佳实践 ...

  4. php ZIP压缩类实例分享

    php ZIP压缩类实例分享 <?php $zipfiles =array("/root/pooy/test1.txt","/root/pooy/test2.txt ...

  5. 效率神器 Workflow 实例分享

    WorkflowShare Workflow实例分享,Github链接:WorkflowShare logo.jpg 苹果公司收购 Workflow 并将其完全免费,作为一款效率类 APP,Workf ...

  6. 使用Python编写简单的端口扫描器的实例分享【转】

    转自 使用Python编写简单的端口扫描器的实例分享_python_脚本之家 http://www.jb51.net/article/76630.htm -*- coding:utf8 -*- #!/ ...

  7. Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享

    Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享 支付宝十年账单上的数字有点吓人,但它统计的项目太多,只是想看看到底单纯在淘宝上支出了多少,于是写了段脚本,统计任意时间段淘宝订单的消费情况,看 ...

  8. Siege(开源Web压力测试工具)——多线程编程最佳实例

    在英语中,"Siege"意为围攻.包围.同时Siege也是一款使用纯C语言编写的开源WEB压测工具,适合在GNU/Linux上运行,并且具有较强的可移植性.之所以说它是多线程编程的 ...

  9. Java实现MD5加密及解密的代码实例分享

    链接:http://www.jb51.net/article/86027.htm Java实现MD5加密及解密的代码实例分享 作者:厦门大学陈黎栋 字体:[增加 减小] 类型:转载 时间:2016-0 ...

随机推荐

  1. jdk1.7和jdk1.8区别

    转自:http://www.2cto.com/kf/201307/225968.html 本文是我学习了解了jdk7和jdk8的一些新特性的一些资料,有兴趣的大家可以浏览下下面的内容. 官方文档:ht ...

  2. JAVA 中转义符的理解

    生物信息中有时候会遇到JAVA写的程序,今天阅读源码的时候发现对于正则中的转义符不好理解,后来查资料后终于弄明白了,这里详细说明一下: 字符串的表示有三种方法:1.直接单字符,例如"A&qu ...

  3. Python File(文件) 方法

    file 对象使用 open 函数来创建,下表列出了 file 对象常用的函数: 序号 方法及描述 1 file.close() 关闭文件.关闭后文件不能再进行读写操作. 2 file.flush() ...

  4. cassandra 3.x官方文档(6)---内部原理之存储引擎

    写在前面 cassandra3.x官方文档的非官方翻译.翻译内容水平全依赖本人英文水平和对cassandra的理解.所以强烈建议阅读英文版cassandra 3.x 官方文档.此文档一半是翻译,一半是 ...

  5. pxe无人值守安装linux机器笔记

    最近做一些集群的测试的工作,做服务器测试最根本就是要安装系统,曾经我们用十几个光驱并行安装光驱的日子过去了,自从有了pxe一两天搭建好一个集群不是梦!当然做多了集群的搭建工作最多的感受就是,其实运维工 ...

  6. arm-none-eabi-g++ -Xlinker -T "../LF3Kmonitor.ld" -Xlinker -Map="Bogota_ICT_V.map"-ram-hosted.ld -mc

    1.arm-none-eabi-g++:是编译ARM裸板用的编译器,不依赖于操作系统. 2.-Xlinker -T "../LF3Kmonitor.ld" -Xlinker -Ma ...

  7. ejabberd编译更新脚本

    ejabberd编译更新脚本 (金庆的专栏 2016.8) 用rebar编译ejabberd源码,然后复制编译所得beam文件到ejabberd安装目录, 调用ejabberdctl热更新. call ...

  8. 23 服务的创建Demo1

    结构 MainActivity.java package com.qf.day23_service_demo1; import android.app.Activity; import android ...

  9. activiti uuid主键

    1.1.1.  activiti默认主键生成方式 ; 下面我们看一下主键的生成策略:主键的生成策略定义在IdGenerator接口中,接口定义如下所示: public interface IdGene ...

  10. 程序员的自我修养-----Java开发的必须知道的几个注意点

    1. 将一些需要变动的配置写在属性文件中 比如,没有把一些需要并发执行时使用的线程数设置成可在属性文件中配置.那么你的程序无论在DEV环境中,还是TEST环境中,都可以顺畅无阻地运行,但是一旦部署在P ...