克里斯·科耶尔（Chris Coyier）：有关CodePen III的出色工作

I'm back! David asked me to rope up some of my favorite stuff on CodePen again, which I both love doing, and wince at the thought of having to pick so few favorites. I like a ton of stuff on CodePen. It's kind of a hobby of mine. Here's some things that appeal to my particular tastes ;)

我回来了！ 大卫问我拉拢一些对CodePen我最喜欢的东西再次，我既爱做的事，在WINCE有挑这么几个收藏的念头。 我喜欢 CodePen上的大量内容。 这是我的一种爱好。 这是一些符合我的口味的东西；)

3D Hamburger Transformicon (3D Hamburger Transformicon)

There are no shortage of hamburgers on CodePen, but this one by Bennett Feely (a transformation of a Dribble Shot by vlbrsk) is exceptionally clever. Bennet is always doing really clever stuff!

在CodePen上不乏汉堡包 ，但是Bennett Feely的这本书 (vlbrsk的Dribble Shot的一种转换)非常聪明。 Bennet一直在做非常聪明的事情！

See the Pen 3D Hamburger Transformicon by Bennett Feely (@bennettfeely) on CodePen.

在CodePen上查看 Bennett Feely( @bennettfeely )的Pen 3D Hamburger Transformicon 。

It reminds me of that Bees & Bombs style of animation where is a little unexpected and tremendously satisfying. 

这让我想起了Bees＆Bombs动画风格，这有点出乎意料并且令人非常满意。

进度导航 (Progress Nav )

I'm a sucker for little UI touches and animations that are almost so understated that you can imagine someone barely noticing, but as a front end dev, you definitely blink twice. That's what Hakim El Hattab's navigation line experiment does:

我对于UI触摸和动画几乎是低估的很痴迷，以至于您几乎无法想到有人注意到了，但是作为前端开发人员，您肯定眨了两次眼睛。 这就是Hakim El Hattab的导航线实验所做的：

See the Pen Progress Nav by Hakim El Hattab (@hakimel) on CodePen.

见笔进展导航由哈基姆埃尔Hattab( @hakimel上) CodePen 。

文字效果 (Text Effects)

It's almost too hard to pick a fav from Mandy Michael's Text Effects. She's definitely pushing the limits of what is possible with styling straight up web text. Here's an incredible one: 

从曼迪·迈克尔(Mandy Michael)的《 文字特效》 ( Text Effects)中选择喜欢的影片几乎是很难的。 她无疑在推动网页文字样式化的极限。 这是令人难以置信的：

See the Pen Layered fonts in css by Mandy Michael (@mandymichael) on CodePen.

在 CodePen上查看 Mandy Michael( @mandymichael ) 在css中使用的Pen Layered字体 。

圣诞礼物打字机 (Christmas Presents Typer )

It's completely bizarre to have presents falling from the sky to form the words you type on a keyboard, as happens in this Pen by Steve Gardner. Bizarre in the best possible way.

就像从史蒂夫·加德纳(Steve Gardner)的这支笔中看到的那样，从天上掉下来的礼物组成您在键盘上键入的单词是完全奇怪的。 以最好的方式离奇。

See the Pen Christmas Presents Typer by Steve Gardner (@steveg3003) on CodePen.

见笔圣诞礼物打字员由史蒂夫·加德纳( @ steveg3003上) CodePen 。

迪诺溜冰者 (Dino skater)

Speaking of bizarre, how about a T-Rex happily skating through town with a blimp for a balloon? Liza Kobrazova is all over it:

说到离奇，T-Rex用气球飞艇快乐地滑过城镇吗？ 丽莎·科布拉佐娃(Liza Kobrazova)遍布整个世界

See the Pen Three.js Dino skater by Liza Kobrazova (@elliepooh) on CodePen.

请参阅CodePen上的Liza Kobrazova( @elliepooh )的Pen Three.js Dino滑板 手 。

很多我！ (Many Me!)

Chris Gannon is one of the most prolific animators on CodePen. Here he's gone autobiographical:

克里斯·甘农(Chris Gannon)是CodePen上最多产的动画师之一。 在这里，他去了自传：

See the Pen Many Me! by Chris Gannon (@chrisgannon) on CodePen.

见笔多我！ 由Chris Gannon( @chrisgannon )在CodePen上发布 。

具有CSS变量的新闻应用程序概念 (News App Concept with CSS Variables)

David Khourshid has been experimenting a lot with the idea of user interactions and CSS variables. As in, what if the event data from a tap or swipe could be passed to CSS in which to control the view? That kind of this is explored here:

David Khourshid一直在尝试进行用户交互和CSS变量的想法。 就像在其中一样，如果可以将来自轻击或轻扫的事件数据传递到CSS中以控制视图，该怎么办？ 这里探讨了这种情况：

See the Pen News App Concept with CSS Variables by David Khourshid (@davidkpiano) on CodePen.

请参阅CodePen上David Khourshid( @davidkpiano ) 撰写的 带有CSS变量的Pen News应用程序概念 。

摇头 (Moving Head)

I love this Marjo Sobrecaray interactive animation. It's rather understated. The girl's face has nine possible states it animates to and from, but the details are just right. Down to the helper animation it begins with to teach you how to interact with it.

我喜欢这个Marjo Sobrecaray互动动画。 相当低调。 这个女孩的脸有九种可能的动画状态，但细节是正确的。 一直到辅助动画，它都开始教您如何与之交互。

See the Pen Moving Head (me) by Marjo Sobrecaray (@maaarj) on CodePen.

见笔摇头(我)由玛乔Sobrecaray( @maaarj上) CodePen 。

CSS网格布局-新术语 (CSS Grid Layout - New Terminology)

Using web design to teach web design is one of my favorite little niches. Stacy Kvernmo does it perfectly here, using cells of a grid layout to teach the words you need to know about grid layout.

使用网页设计教网页设计是我最喜欢的小生境之一。 Stacy Kvernmo在这里完美地做到了这一点，使用网格布局的单元来教您需要了解的有关网格布局的单词。

See the Pen CSS Grid Layout - New Terminology by Stacy (@stacy) on CodePen.

见笔CSS网格布局-新术语的斯泰西( @stacy上) CodePen 。

最小的世界 (Minimal Overworld)

David DeSandro uses CodePen a bunch to demonstrate things for his Metafizzy projects, like Packery. He also brings amazing little ideas to life, like his Cub n Pup game, and this map generator that reminds me a ton of the top-down look of old NES games like Ultima.

David DeSandro大量使用CodePen为他的Metafizzy项目(例如Packery)演示东西。 他还给生活带来了惊人的小想法，例如他的Cub n Pup游戏 ，而这个地图生成器让我想起了很多旧的NES游戏(如Ultima)的自上而下的外观。

See the Pen Minimal overworld by David DeSandro (@desandro) on CodePen.

请参阅CodePen上的David DeSandro( @desandro ) 撰写的Pen Minimal overworld 。

泳池波纹 (Pool Ripple)

Speaking of understated animations, Sarah Drasner animated this little cute pool in which the surface of the water gently sways, but even cooler, the floatie hits the wall and generates a ripple across the surface of the water, courtesy of some fancy SVG filters.

 

说到低调的动画，莎拉·德拉斯纳(Sarah Drasner)为这个小小的可爱的游泳池制作了动画，其中水面轻轻地摇摆，但更凉爽的是，浮子撞击墙壁并在水面上产生波纹，这要归功于一些精美的SVG过滤器。

See the Pen Pool Ripple by Sarah Drasner (@sdras) on CodePen.

 

在CodePen上查看 Sarah Drasner( @sdras )的笔池波纹 。

翻译自: https://davidwalsh.name/codepen-animations