12个令人难以置信的CodePen.IO演示

Whenever I need to put my ego in check, I go to Chris Coyier's new CodePen.IO site.  CodePen.IO is an incredible showcase of HTML, CSS, and JavaScript, displaying the talents of developers creating effects that 99% of the world's front-end developers couldn't create.  I spent a few hours while on CodePen, and after I picked my jaw up from the floor, I put together a collection of my favorite CodePen.IO demos.  Enjoy!

每当需要检查自我时，我都会访问Chris Coyier的新CodePen.IO网站。 CodePen.IO是HTML，CSS和JavaScript的令人难以置信的展示，展示了开发人员创造出世界99％的前端开发人员无法创建的效果的才能。 我花了一个 几个小时 在使用CodePen时，当我从地板上抬起我的下巴后，我整理了一组我最喜欢的CodePen.IO演示。 请享用！

蠕虫 (Draw Worm)

Draw Worm is an eye-catching, canvas-based animation that creates branches; better yet, the animation follows the mouse, creating more branches.

Draw Worm是基于画布的引人注目的动画，可创建分支。 更好的是，动画跟随鼠标移动，创建了更多分支。

导航旋钮 (Navigation Knob)

Navigation Knob, created with only HTML and CSS, is a circlear knob which illuminates the selected value when clicked. The value change is highlighted by opacity shine and animating around the circle. A great feat without JavaScript!

仅使用HTML和CSS创建的导航旋钮是一个圆形旋钮，单击该旋钮可照亮选定的值。 值变化通过不透明光泽和围绕圆的动画来突出显示。 没有JavaScript的壮举！

落后 (Trail)

Trail is another cavas-based masterpiece which creates different color rays that follow the user's mouse at an accelerated rate. Even color is that you can see grey lines stay in the background, representing vapor trails.

Trail是另一种基于cavas的杰作，它创建不同的颜色光线，并以加快的速度跟随用户的鼠标。 甚至是颜色，您也可以看到灰色线条保留在背景中，代表蒸气痕迹。

没有什么比你更重要 (Nothing is Beyond You)

Nothing is Beyond You is another no-JavaScript demo, abusing CSS animations and shapes to create an underwater bubbling effect.

超越一切您将是另一个没有JavaScript的演示，它滥用CSS动画和形状来创建水下起泡效果。

单元素Google Chrome (Single Element Google Chrome)

This single-element demo composes the Google Chrome logo using :before and :after, as well as a number of CSS gradients. Hover over the logo and it shrinks and rotates too!

这个单元素演示使用:before和:after以及许多CSS渐变来组成Google Chrome徽标。 将鼠标悬停在徽标上，它也会收缩和旋转！

曲折的 (Twisty)

Yet another awesome CSS-only animation; this demo uses 30 DIV elements and yet only 4 real CSS declarations. What's more impressive is that it's not just a spinning set of elements -- the elements warp into different shape patterns too.

另一个很棒的纯CSS动画； 该演示使用30个DIV元素，但仅包含4个真实CSS声明。 更为令人印象深刻的是，这不仅仅是一组旋转的元素-元素也翘曲成不同的形状图案。

林杰 (Linjer)

Linjer starts out as a pulsating set of colored lines, until you click around the lines! The animations intensify near the clicks and the rippling becomes more meaningful.

Linjer开始时是一组脉动的彩色线条，直到您单击线条周围！ 单击附近的动画会增强，并且波纹会变得更有意义。

CSS 3D测试 (CSS 3D Test)

CSS 3D Test presents a rotated 3D image which animates to a presentable position when hovered. You'd be surprised at how little CSS is used to accomplish this task.

CSS 3D测试提供了一个旋转的3D图像，将其悬停时会动画显示在一个合适的位置。 您会以很少CSS来完成此任务而感到惊讶。

社交切换簿 (Social Switchbook)

Social Switchbook is probably the most practical of the demos provided in this post. The effect provides a keyring-style set of elements which animate into display as you hover over each. No JavaScript involved.

Social Switchbook可能是本文中提供的最实用的演示。 该效果提供了一组关键环样式的元素，当您将它们悬停在每个元素上时，它们会动画显示。 不涉及JavaScript。

帆布烟花 (Canvas Fireworks)

Canvas Fireworks is a neat and responsive demo, shooting fireworks to the position at which you click. There's even a control panel to all you to customize speed, color, and accuracy of the firework.

Canvas Fireworks是一个灵巧，React灵敏的演示，可以将烟花发射到您单击的位置。 甚至还有一个控制面板供您自定义烟花的速度，颜色和准确性。

绝命毒师 (Breaking Bad)

The guys on Breaking Bad sell one hell of a drug, and Tim Pietrusky must have also beed on one when he created this excellent SVG-powered tribute to the shows opening credits. Take note of how realistic the chemical smoke looks behind the logo!

《绝命毒师》中的家伙卖出了一种地狱药，而蒂姆·皮特鲁斯基(Tim Pietrusky)在为这场秀开场表演创造了这种出色的SVG动力致敬时，一定也被它骗了。 请注意徽标后面的化学烟雾看起来有多逼真！

Sketch.js (Sketch.js)

The sketch.js demo is an awesome bubbling effect that follows your mouse, creating circles of all sizes and colors. Even cooler is that the circles shrink and move in random motions as they get further away from the mouse!

sketch.js演示是一个很棒的冒泡效果，跟随您的鼠标，创建各种大小和颜色的圆圈。 更酷的是，圆环随着距离鼠标越来越远而收缩并随机运动！

And there you have it -- mind-blowing CSS, JavaScript, and canvas-powered animations that push our browsers to the brink. All credit due to the authors of these fine animations!

到处都有-令人赞叹CSS，JavaScript和画布驱动的动画，将我们的浏览器推向了边缘。 所有归功于这些精美动画的作者！

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