Sara Soueidan的最爱CodePen演示-CSDN博客

One of the awesome developers I recently caught on to is Sara Soueidan. Her tutorials about SVG have been top class and she's taught me a lot about the excellence that is SVG. Since she's one of my SVG heroes, I thought it would be awesome to have her pick out some of her favorite CodePen demos. Enjoy!

我最近遇到的最出色的开发人员之一是Sara Soueidan。她关于SVG的教程是一流的，她教会了我很多关于SVG的卓越知识。由于她是我的SVG英雄之一，所以我认为让她挑选一些她最喜欢的CodePen演示会很棒。请享用！

A few months ago, Chris Coyier shared his favorite CodePen demos right here on David's blog. A while back David asked me to share some of my favorite pens too, so here are some of the demos that have blown my mind in the past few months as well.

几个月前，Chris Coyier在David的博客上分享了他最喜欢的CodePen演示。不久前，David要求我也分享一些我最喜欢的笔，所以在过去的几个月中，这里也有一些演示使我震惊。

The main thing you'll notice about my favorite pens is that most of them are done using SVG. SVG's awesome animation capabilities combined with some really great animation libraries can yield some very impressive effects, as you'll see.

关于我最喜欢的笔，您会注意到的主要事情是，大多数笔都是使用SVG完成的。就像您将看到的那样，SVG的强大动画功能与一些非常出色的动画库相结合可以产生一些非常令人印象深刻的效果。

You'll always find amazing pens in Lucas Bebber's profile page. His works is outstanding! So here are a few of his pens that made it to my list of favorites:

在卢卡斯·贝伯(Lucas Bebber)的个人主页上，您总能找到令人惊奇的笔。他的作品非常出色！因此，以下是他的一些笔，使其成为我的最爱：

1. CSS雨滴 (1. CSS Raindrops)

I saw a "picture through wet glass" effect once created using HTML5 Canvas and lots of JavaScript, but to create this effect using nothing but good old CSS is a whole other thing; and Lucas did just that! The pen also comes with options that allow you to change the focus to be either on the rain drops, the background image, or both.

我曾经看到使用HTML5 Canvas和大量JavaScript创建的“通过湿玻璃画”效果，但是仅使用良好的旧CSS来创建此效果完全是另一回事。卢卡斯就是这样做的！笔还带有选项，使您可以将焦点更改为落在雨滴上，背景图像上，或同时在两者上。

See the Pen CSS Raindrops on a Window by Lucas Bebber (@lbebber) on CodePen.

请参阅CodePen 上的 Lucas Bebber( @lbebber ) 撰写的Pen CSS Windows窗口上的雨滴。

2.“粘稠效应” (2. "The Goo Effect")

I think most of you have seen or maybe heard of this effect lately. The goo effect is probably the most creative effect created using SVG filters that I've yet come across.

我认为你们中的大多数人最近都已经看到或听说过这种效果。粘稠效应可能是我遇到的使用SVG滤镜创建的最具创意的效应。

See the Pen CSS Gooey Menu (Version 1) by Lucas Bebber (@lbebber) on CodePen.

见笔CSS黏菜单(1版)卢卡斯Bebber( @lbebber )上CodePen 。

Lucas has written more about this effect over at CSS-Tricks and has shared many more use cases and examples on Codrops. I totally recommend you check the articles out if you wanna learn how the effect is created.

Lucas 在CSS-Tricks上写了更多关于这种效果的文章，并在Codrops上分享了更多的用例和示例。如果您想了解效果是如何创建的，我完全建议您查看这些文章。

3.运动模糊 (3. Motion Blur)

SVG filters FTW. Again, Lucas uses SVG's built-in filter effects to create an effect that can take our UIs to the next level.

SVG过滤器FTW。同样，Lucas使用SVG的内置滤镜效果来创建一种可以将我们的UI提升到新水平的效果。

See the Pen Motion Blur Experiment by Lucas Bebber (@lbebber) on CodePen.

见笔运动模糊实验卢卡斯Bebber( @lbebber )上CodePen 。

4.弯曲的文字 (4. Squiggly Text)

Did you know that SVG offers us a turbulence filter? I didn't, until I saw this code pen by Lucas. My favorite part is that the text is fully editable and that even the blinking cursor is going to squiggle as you edit the text.

您知道SVG为我们提供了湍流过滤器吗？我没有，直到我看到卢卡斯的这支密码笔。我最喜欢的部分是文本是完全可编辑的，并且在编辑文本时，即使是闪烁的光标也会变模糊。

See the Pen Squiggly Text Experiment by Lucas Bebber (@lbebber) on CodePen.

见笔弯弯曲曲的文本实验中卢卡斯Bebber( @lbebber )上CodePen 。

You can find many more of Lucas's experiments in his Codepen profile.

您可以在他的Codepen个人资料中找到卢卡斯的更多实验。

5.弯曲的UI切割 (5. Curved UI Cut)

I've recently given a talk about how everyone should be using SVG more to build better UIs, so anything that leverages SVG's flexibility to do that wins my heart. HORNEBOM created this simple yet beautiful example showing how SVG's paths can be used to break free from the rectangular limitations of the box model in CSS to create more flexible and "bending" UIs. The additional touch of changing the curve of the line as you scroll down is beautiful.

最近，我谈到了每个人应该如何更多地使用SVG来构建更好的UI，因此，任何利用SVG的灵活性来做的事情都深深吸引我。 HORNEBOM创建了这个简单而优美的示例，展示了如何使用SVG的路径摆脱CSS中盒子模型的矩形限制，从而创建更加灵活和“弯曲”的UI。向下滚动时更改线的曲线的附加效果很漂亮。

See the Pen Curved Cut by Hornebom (@Hornebom) on CodePen.

请参见CodePen上Hornebom ( @Hornebom ) 弯曲的笔。

6.“网络运动” (6. "Motion For The Web")

What happens when you combine incredibly smooth animations (SVG again!) with subtle motion and matching music? You get this beauty:

当您将令人难以置信的平滑动画(再次是SVG！)与微妙的动作和匹配的音乐结合在一起时，会发生什么？您会得到这种美丽：

See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen.

请参阅CodePen上的LegoMushroom ( @ sol0mka )的Pen ·●网络动画●· 。

My favorite part about this pen is the controls that allow you to control the speed of animation so you can slow it down and analyse it as you go. Beautiful work by LegoMushroom.

关于这支笔，我最喜欢的部分是允许您控制动画速度的控件，因此您可以放慢速度并在进行分析时对其进行分析。 LegoMushroom的作品精美。

LegoMushroom does great job using different animation libraries to create really compelling animation effects like the one we saw in the previous demo. In this demo, you can destroy (literally) the modal window by closing it. The sound effect makes it even more fun to "break"!

LegoMushroom在使用不同的动画库来创建真正引人注目的动画效果方面表现出色，就像我们在上一个演示中看到的那样。在此演示中，您可以通过关闭(字面意义上的)模态窗口来关闭它。声音效果使“断裂”变得更加有趣！

See the Pen Modal window destroy concept by LegoMushroom (@sol0mka) on CodePen.

请参阅CodePen上LegoMushroom ( @ sol0mka )的“笔模态”窗口销毁概念。

8.使用CSS `clip-path`加载图标 (8. Loading Icon Using CSS `clip-path`)

I love this code pen mostly because it uses one of my favorite CSS properties and in a very creative way. The clip-path property allows us to clip elements to specific polygonal shapes using the polygon() function, and this function can be animated using CSS animations and transitions. Bennett Feely did exactly that in this demo, and by changing the background color of the element as the clip-path animates, we get a really nice loading animation.

我喜欢这支代码笔，主要是因为它以一种非常有创意的方式使用了我最喜欢CSS属性之一。 clip-path属性允许我们使用polygon()函数将元素裁剪为特定的多边形形状，并且可以使用CSS动画和过渡对该函数进行动画处理。 Bennett Feely在此演示中完全做到了这一点，并且通过在剪切路径动画化时更改元素的背景颜色，我们得到了一个非常不错的加载动画。

See the Pen Loading Icon by Bennett Feely (@bennettfeely) on CodePen.

见笔加载图标由贝内特肉麻( @bennettfeely )上CodePen 。

If you're interested in learning more about this property, you can check this article on my blog out.

如果您想了解有关此属性的更多信息，可以在我的博客上查看此文章。

9.“当你性格内向时” (9. "When You're An Introvert")

Sarah Drasner knows what it's like to be an introvert, and since I am one, this pen spoke right to my heart. Not only does the moral behind it mean a lot to me, but it's also an animated SVG! Two wins!

莎拉·德拉斯纳(Sarah Drasner)知道成为一个性格内向的人会是什么样子，而且由于我是一个内向的人，这支笔对我的内心说得很对。它背后的道德观念不仅对我意义重大，而且还是动画SVG！两胜！

See the Pen When you're an introvert... by Sarah Drasner (@sdras) on CodePen.

Sarah Drasner( @sdras ) 的内向型...在CodePen上查看笔。

10. GIF + CSS混合模式 (10. GIF + CSS Blend Modes)

Combine an animated GIF with CSS blend modes and you get this beautiful effect by Yoksel.

将动画GIF与CSS混合模式结合使用，即可获得Yoksel的精美效果。

See the Pen LErrRX by yoksel (@yoksel) on CodePen.

请参阅CodePen上 yoksel( @yoksel )的Pen LErrRX 。

The animation is incredibly smooth and the introduction of CSS blend modes turns it into a beautiful effect that shows that the possibilities of what can be done with new CSS features are countless.

动画令人难以置信的流畅，CSS混合模式的引入使它变成了美丽的效果，表明使用CSS新功能可以实现的可能性是无数的。

If you're interested in CSS blend modes, you can read all about them here.

如果您对CSS混合模式感兴趣，可以在此处阅读有关它们的全部信息。

最后的话 (Final Words)

The above pens are some of my favorites, but there are many many more than I could possibly list here that I absolutely love too. You can check some of my favorite pens in my "Loved" tab in my Codepen profile. I hope these demos have been inspirational enough for you to experiment more and share your own creative work on Codepen too.

上面的笔是我的最爱，但是我绝对不能在这里列出更多的笔。您可以在Codepen个人资料的 “喜爱”标签中查看一些我最喜欢的笔。我希望这些演示足以激发您的灵感，让您可以进行更多实验并在Codepen上分享您自己的创意作品。