10 个启发你下一个前端项目的想法

将 Web 技术与创造力相结合，所能构建出的东西真是令人惊叹。
本文中您将看到的所有内容均仅使用 JavaScript、HTML 和 CSS 创建。未使用任何 Photoshop 或类似工具，所有内容在浏览器中运行良好。

探索和体验这些小例子固然有趣，但如果能看看每个项目的源代码就更好了。这提供了学习新知识的绝佳机会，还能从优秀的创作者那里获得很多灵感。

我挑选了 10 个在 CodePen.io 上发布并可供公众访问的优秀示例。CodePen 是一个由 Chris Coyier（css-tricks.com 创始人）共同创建的优秀平台。

他们称自己为一个社会开发环境，开发人员和工程师可以在其中合作开展项目、展示他们的工作、与社区分享事物并提出新想法。

我鼓励你探索下面所有的例子，尝试操作它们，并尝试理解它们的工作原理。你不仅会从中获得很多乐趣，还能学到很多关于网络创意的知识。别忘了，我们向创作者的杰出作品致敬！

1.点击按钮！

我选择的第一个作品是挪威才华横溢的创意大师 Bård N Hovde 的作品“Click the button!”。
这是我在 CodePen 上最喜欢的作品，因为它简洁却令人印象深刻，别出心裁，每次玩起来都让我心情愉悦。我保证你绝对不会后悔尝试这个作品！

2. 信用卡表格

如今，很多网站都要求我们以某种形式输入信用卡信息。而对我来说，这并不总是一件有趣的事情，因为这些表单的构建方式。
当我发现 Muhammed Erdem（他最近被评为 CodePen 上最受欢迎的创作者之一）的“信用卡表单”时，我感到非常惊喜，并立即想知道为什么网站创建者还没有使用如此精美的表单。
在表单中输入我的信用卡信息其实很有趣，这是每个网站所有者都应该最感兴趣的事情！

3.纯CSS静物

Ben Evans 的这个精选作品完美展现了 CSS 的强大功能。有时我仍然不敢相信，这幅美丽的风景竟然没有用任何图片来创作。
它也很好地提醒了我们，CSS 可以成就什么！Ben 还有一些 CSS 魔法的例子，你也可以在 CodePen 上查看他的个人资料。

4. 给沙发涂上颜色！

Kyle Wetton 创作了一款令人印象深刻的交互式 Pen，可以让你为沙发和背景着色。它体积小巧，可以用于销售家具的电商网站。
此外，它还很好地展示了如何使用 SVG 和混合模式。

5.立方体

这不仅仅是一个简单的 Web 技术演示，而是一个大多数人可能都知道的真实游戏。我钦佩 Boris Šehovac 用这款 Pen 展现的创造力和执行力。
这也是 2019 年 CodePen 上最受欢迎的项目之一，我完全赞同！

6. 面部按钮

正如 Katherine Kato 用这支小笔演示的那样，不必总是最复杂的项目才能令人印象深刻。
看看只需要少量代码就能生成这个有趣的互动演示。这让我想起一个道理：少即是多。干得好，Katherine！

7.迷你音乐播放器

Muhammed Erdem 的又一款 Pen，再次展现了他的非凡能力。如果我的公司需要一位优秀的工程师，我会立刻聘请他，比其他人都早。
虽然我们可以争论这个演示中的音乐，但绝对不能争论播放器的外观和体验。干得好，Muhammed。
所有流媒体提供商：看看这个，也许你能学到一些东西！

8. 简单的 CSS 波浪

来自芬兰的 Daniel "Goodkatz" Östermann 为我们带来了另一个精彩的例子，展现了仅使用 CSS 就能实现的精彩功能。
想象一下，在你的个人网站或落地页上实现这样的效果——省力又美观。轻量却强大——我喜欢这种组合！

9. CSS卡片悬停效果

Jhonier Riascos Zapata 的另一个例子很好地说明了，我们很多时候不需要 JavaScript 来实现网站的交互。我可以整天悬停在这些卡片上，因为我真的很喜欢这支笔。向 Jhonier 致敬！

10. 咔哒咔哒

Steve Gardner 的这支钢笔或许你不会在项目中用到，但它完全用 CSS 创作出来，真的非常令人印象深刻。
没错，就是 CSS。是不是很棒？
这总是提醒我，我必须更加认真地对待 CSS，投入更多时间探索它为我们带来的无限可能。现在，祝各位读者一切顺利！

好了，工程师们的非凡创造力的史诗级演示就到此结束了。探索这些笔给了我很多灵感，希望你也能如此！

我最近创建了一个新网站——The Smart Coder，在这里我为社区创作免费内容。欢迎查看我另一篇关于JavaScript 初学者项目的文章！

如果您喜欢我写的内容并希望支持我和我的工作，请在Twitter上关注我，以了解有关编程、制作、写作和职业的更多信息🥰