克里斯·科耶尔（Chris Coyier）最喜欢的CodePen Demos II

Hey everyone! Before we get started, I just want to say it's damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so much damn fine work on CodePen. Ten just isn't enough. Thankfully, I get to pick new amazing work to show everyday, which is what the CodePen homepage is. So I'll just pick some exceptional Pens that have been posted pretty recently.

嘿大家！ 在我们开始之前，我只想说很难在CodePen上选择这几个收藏夹。 并不是因为，作为CodePen的共同创始人，我觉得自己就像是一个父亲选他最喜欢的孩子(RUDE)。 但是，因为在CodePen上有很多该死的出色工作。 十个还不够。 值得庆幸的是，我每天都可以挑选出惊人的新作品来展示，这就是CodePen主页的内容。 因此，我只选择最近发布的一些出色的笔。

强大的鱼 (Mighty Fish)

Karim Maaloul's "Chill the Lion" blew up in popularity the other day, but check out some of his earlier Pens too, like "Mighty fish":

前一天，卡里姆·马洛(Karim Maaloul)的《冰冷的狮子》(Chill the Lion)广受欢迎，但也可以看看他的一些早期的Pens，例如“威武的鱼”：

See the Pen Mighty fish by Karim Maaloul (@Yakudoo) on CodePen.

在CodePen上看到 Karim Maaloul( @Yakudoo )的Pen Mighty鱼 。

响应式动画信息图 (Responsive Animated Infographic)

I was recently mesmerized by Sarah Drasner's "Responsive Animated Infographic". She took some data about different potential solutions to global warming and created an interactive infographic from it. The result isn't just impressive and fun, it actually delivers the information in a super effective way. You travel through the options in the order of likelihood while seeing how effective and costly they are. Not to mention… responsive. Wow.

最近，我被Sarah Drasner的“响应式动画信息图”迷住了。 她收集了有关全球暖化潜在解决方案的一些数据，并据此创建了一个交互式信息图。 结果不仅令人印象深刻且有趣，它实际上以一种超级有效的方式提供了信息。 您以可能性的顺序浏览选项，同时查看它们的有效性和成本。 更不用说...ReactSwift。 哇。

See the Pen Responsive Animated Infographic. by Sarah Drasner (@sdras) on CodePen.

请参阅笔响应式动画信息图。 由Sarah Drasner( @sdras )在CodePen上编写 。

电涌 (Power Surge)

CodePen can be an a great place for teaching and learning. I applaud Mozilla for using it that way with the "Power Surge" game they made. The idea is that the game is fun and playable, but has some performance issues (on purpose). You use performance tools available in the DevTools to analyze and fix them.

CodePen可能是教学的好地方。 我为Mozilla在他们制作的“ Power Surge”游戏中使用这种方式而称赞。 这个想法是，游戏既有趣又可玩，但是(故意)存在一些性能问题。 您可以使用DevTools中提供的性能工具进行分析和修复。

See the Pen Power Surge by Mozilla Hacks (@mozhacks) on CodePen.

见笔电源浪涌 Mozilla的黑客( @mozhacks )上CodePen 。

线路装载机 (Line Loader)

Chris Gannon does some incredible work with SVG animation. It's always tasteful and modern feeling. It makes you wish interaction design on the web was always this much fun, like this "Line Loader" demo:

克里斯·甘农(Chris Gannon)在SVG动画方面做得非常出色。 总是有品位和现代感。 它使您希望Web上的交互设计总是这么有趣，例如以下“ Line Loader”演示：

See the Pen SVG Line Loader (success) by Chris Gannon (@chrisgannon) on CodePen.

见笔SVG线装载机(成功)由克里斯·甘农( @chrisgannon上) CodePen 。

飘飘飘飘的彩虹星星 (Floaty fluttery rainbow stars)

Rachel Smith has been killing it blogging about doing awesome things with JavaScript lately, making complicated subjects like physics and bézier curves easier to understand and fun. Her energy is infectious when you check out her fun Pens like this "Floaty fluttery rainbow stars":

雷切尔·史密斯(Rachel Smith)最近在博客中杀害了它， 用JavaScript来做一些很棒的事情 ，使诸如物理学和贝塞尔曲线这样的复杂主题更容易理解和有趣。 当您查看她的趣味笔时，她的能量就会充满感染力，例如“蓬松的彩虹彩虹星”：

See the Pen Floaty fluttery rainbow stars by Rachel Smith (@rachsmith) on CodePen.

见笔轻飘fluttery彩虹明星雷切尔·史密斯( @rachsmith )上CodePen 。

杰克·阿尔博 (Jake Albaugh)

Jake Albaugh's CodePen account actually became self-aware not long ago and programmed itself. So yeah that was a first.

杰克·阿尔博(Jake Albaugh)的CodePen帐户实际上不久前就变得具有自我意识并进行了编程。 是的，这是第一次。

See the Pen pen#PwLXXP by Jake Albaugh (@jakealbaugh) on CodePen.

请参阅CodePen上的Jake Albaugh( @jakealbaugh )的Pen pen＃ PwLXXP 。

彩虹圈 (Rainbow Circle)

Tiffany Rayside is incredibly prolific on CodePen. One super interesting thing she has been doing lately is starting with some base code and "remixing" it to create totally different visual demos. In the case of her Foo Particles Collection, the particle code is identical but only values and design choices change. One example:

Tiffany Rayside在CodePen上的表现非常出色。 她最近一直在做的一件超级有趣的事情是从一些基本代码开始，并将其“重新混合”以创建完全不同的视觉演示。 对于她的Foo Particles Collection ，粒子代码是相同的，但只有值和设计选择会更改。 一个例子：

See the Pen Foo Particles Four by Tiffany Rayside (@tmrDevelops) on CodePen.

见笔美孚颗粒四蒂芙尼Rayside( @tmrDevelops )上CodePen 。

野生的有线块 (Wild, Wired Blocks)

Jack Rugile's demos often feel like they should be part of Hollywood movie intros. Incredibly artistic, performant, beautiful, surprising, and classy.

杰克·鲁吉尔(Jack Rugile)的演示经常觉得应该成为好莱坞电影介绍的一部分。 令人难以置信的艺术，表演，美丽，令人惊讶和优雅。

See the Pen Rainbow Grid by Jack Rugile (@jackrugile) on CodePen.

请参阅CodePen上的Jack Rugile( @jackrugile ) 撰写的Pen Rainbow Grid 。

角交互式盒模型图 (Angular Interactive Box-Model Diagram)

Demos that are built specifically to teach a concept are always close to my heart. This beautiful interactive demo to teach the box model in CSS by Caroline Artz is amazing:

专为讲授概念而制作的演示始终贴近我的心。 这个由Caroline Artz教授的漂亮的交互式演示CSS盒模型教学令人惊叹：

See the Pen angular interactive box-model diagram by Caroline Artz (@carolineartz) on CodePen.

看到笔角交互式盒模型图由Caroline阿尔茨( @carolineartz )上CodePen 。

Mojo Working (Mojo Working)

Gerard Ferrandez's work is captivating. It's beautiful, while embracing the absurd and making you think. Apparently transparent is a good example of that, but all his demos are worth a look. Here's one of my favorites that gets into the "glitch" look that I can't get enough of:

杰拉德·费兰德斯(Gerard Ferrandez)的作品令人着迷。 它很美丽，同时拥抱荒诞的事物并使您思考。 显然透明是一个很好的例子，但他的所有演示都值得一看。 这是我最不喜欢的“小故障”外观之一：

See the Pen mojo working by Gerard Ferrandez (@ge1doot) on CodePen.

参见Gerard Ferrandez( @ ge1doot )在CodePen上工作的Pen mojo 。

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