Chris Coyier的最爱CodePen演示

Chris Coyer's incredible CodePen is much more than your typical code'n'share site. CodePen features the end result more than the code, provides loads of collaboration tools, and seems to be pushing new features every week. But what does Chris think of the user work being done on CodePen? I've asked Chris to share his favorite pens -- enjoy!

克里斯· 科耶 (Chris Coyer )令人难以置信的CodePen远远超过了您的典型Code'n'Share网站。 CodePen具有比代码更多的最终结果，提供大量的协作工具，并且似乎每周都会推出新功能。 但是，克里斯对在CodePen上完成的用户工作有何看法？ 我已经请克里斯分享他最喜欢的钢笔-尽情享受吧！

David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you just can't get enough, I heart a bunch of Pens every day and reserve my triple hearted Pens for my absolute favorites.

大卫问我是否愿意去做客座帖子，从CodePen挑选一些我最喜欢的笔。 艰巨的任务！ 有这么多！ 尽管过去几个月让我震惊，但我还是设法选了一些。 如果您不能满足需求，我每天会给我一堆钢笔，并为我的最爱保留我的三心钢笔。

鲸 (Whale)

I love the simplicity of this one. When you think about how it's made, it's just some shapes stacked on top of each other that follow the mouse around. But timing and the shading and responsiveness and everything makes it so satisfying to play with.

我喜欢这个简单。 当您考虑其制作方式时，只是一些形状相互叠加，跟随着鼠标。 但是时间，阴影和响应能力以及所有这些使它非常令人满意。

See the Pen Whale | SVG & JS by Diego Leme (@diegoleme) on CodePen

见笔鲸| Diego Leme( @diegoleme )的SVG和JS在CodePen上

阿夫隆德 (Avgrund)

Hakim's demos are always so perfect it's hard to pick one. I think I like this one because of how practical it is. I'm not sure I've ever seen a modal window accomplish the visual trompe l'oeil of depth so well.

哈基姆(Hakim)的演示总是那么完美，很难挑选其中的一个。 我想我喜欢这一本书，因为它很实用。 我不确定我是否曾经看到过一个模态窗口能很好地完成视觉上的深度描写。

See the Pen Avgrund by Hakim El Hattab (@hakimel) on CodePen

在CodePen上查看Hakim El Hattab( @hakimel )的Pen Avgrund

撕裂布 (Tearable Cloth)

I believe this is our most popular Pen ever on CodePen with going on 1.5 million views. And for good reason. It's rather amazing how "real" interacting with it feels - with the gravity and the swaying and how the fabric folds up on itself and tears and falls to the floor and everything.

我相信这是我们在CodePen上最受欢迎的Pen，具有150万的观看次数。 并且有充分的理由。 令人惊奇的是，与之交互的感觉是“真实的”-随着重力和摇摆，以及织物如何自身折叠，撕裂并掉落到地板以及所有物体上。

See the Pen Tear-able Cloth by suffick (@stuffit) on CodePen

参见CodePen上的suffick ( @stuffit )的笔可撕布

色带 (Ribbon)

Justin Windle also creates spine-tingling interactions. It is easy to feel good about the future of the web platform when you see stuff like this performing so smoothly.

贾斯汀·温德(Justin Windle)也创造出刺骨的互动。 当您看到这样的工作进展顺利时，很容易对Web平台的未来感到满意。

See the Pen Ribbon by Justin Windle (@soulwire) on CodePen

在CodePen上查看 Justin Windle( @soulwire )的笔功能区

轻型装载机 (Light Loader)

I'm a sucker for particle demos, but especially when they have a practical twist to them like this progress bar indicator by Jack Rugile. I'd wait all day for a page to load with that baby.

我很喜欢粒子演示，但是特别是当他们对杰克·鲁吉尔(Jack Rugile)的进度条指示器有实际的想法时。 我会整天等待页面加载那个婴儿。

See the Pen Light Loader by Jack Rugile (@jackrugile) on CodePen

见笔轻装载机杰克Rugile( @jackrugile )上CodePen

机械草 (Mechanical Grass)

This Tim Holman Pen just immediately transports me to some other worldly place. Like a steampunk Alice in Wonderland or something.

蒂姆·霍尔曼笔(Tim Holman Pen)立刻将我带到了其他世俗的地方。 就像仙境中的蒸汽朋克爱丽丝之类的东西。

See the Pen Mechanical Grass by Tim Holman (@tholman) on CodePen

见笔机械草由蒂姆·霍尔曼( @tholman )上CodePen

个人页面 (Personal Page)

I felt really good about CodePen when I saw this Pen by Tim Pietrusky:

看到蒂姆·皮特鲁斯基(Tim Pietrusky)的这支笔时，我对CodePen感到非常满意：

I spend my online time chatting with the 4ae9b8 team. We found each other through CodePen. Hugo Giraudel, Mads Cordes (>:D), Sara Soueidan, Ana Tudor, Fabrice Weinberg & Joshua Hibbert. A really awesome group of people to spend the timewith. I ❤ you guys!

我在网上与4ae9b8小组聊天。 我们通过CodePen找到了彼此。 Hugo Giraudel，Mads Cordes(>：D)，Sara Soueidan，Ana Tudor，Fabrice Weinberg和Joshua Hibbert。 一群很棒的人一起度过时光。 我❤你们！

See the Pen "Tell us something about you" by Tim Pietrusky (@TimPietrusky) on CodePen

在CodePen上查看 Tim Pietrusky( @TimPietrusky )的笔“告诉我们有关您的东西”

Twitter按钮概念 (Twitter Button Concept)

3D CSS effects can be simple, classy, and effective like Bennett Feely proves here.

就像Bennett Feely在这里证明的那样，3D CSS效果可以简单，经典且有效。

See the Pen Twitter Button Concept by Erik Deiner by Bennett Feely (@bennettfeely) on CodePen

在CodePen上查看 Bennett Feely( @bennettfeely )的Erik Deiner撰写的Pen Twitter Button Concept

三角错觉 (Triangle Optical Illusion)

Ana Tudor is great at instructional programming, where she reveals how it is done through the visual demo itself. This tricky old optical illusion is one of my favorite fun examples of that.

Ana Tudor非常擅长教学编程，她在视觉演示中展示了它是如何完成的。 这种棘手的老式错觉是我最喜欢的有趣例子之一。

See the Pen Now how does this happen? :) by Ana Tudor (@thebabydino) on CodePen

请参阅Pen 现在如何进行？ :) by Ana Tudor( @thebabydino )在CodePen上

A huge thank you to Chris for sharing his favorite pens! It's really great to get his take on the work being featured on his platform. I hope you enjoyed his favorites and hit CodePen to find a few of your own! I also hope you are inspired to add your own awesomeness to CodePen so he picks your pen next time!

非常感谢克里斯分享他最喜欢的笔！ 能够在平台上展示他的作品真是太好了。 希望您喜欢他的最爱，并点击CodePen来找到自己的一些！ 我也希望您能从中激发灵感，为CodePen添加自己的精妙之处，以便他下次选择您的笔！

翻译自: https://davidwalsh.name/chris-coyiers-favorite-pens