Jhey 的主要信条之一是让学习变得有趣。在这篇文章中,他向您展示了如何通过将您的想法付诸实践来提高您的技能,并且不要忘记您可以玩代码。有了这种心态,每一个想法都必然会成为尝试新事物的机会。
给东西命名很难,对吧?好吧我能想到的最好的东西。 一天晚上我在电视上看到了这样的效果,并给自己做了一个笔记来制作类似的东西。 虽然这不是我希望很快放在网站上 台湾电话号码清单 的东西,但这是一个很好的小挑战。它符合我对“代码中的趣味性”学习的整体立场。不管怎样,几天后,我坐在键盘前,几个小时后我得到了这个:
我的最终演示是一个 React 应用程序,但我们不需要深入研究如何使用 React 来解释完成这项工作的机制。一旦我们确定了如何让它工作,我们将创建 React 应用程序。
注意:在我们开始之前。值得注意的是,此演示的性能受网格大小的影响,最好在基于 Chromium 的浏览器中查看演示。
让我们从创建网格开始。假设我们想要一个 的网格。那是 个单元格(这就是为什么 React 对于这样的事情很方便)。每个单元格将由一个元素组成,该元素包含可翻转卡片的正面和背面。
卡片的背面通过 组合使用旋转来确定其位置transform。但是,有趣的部分是我们如何显示每张卡片的图像部分。在此演示中,我们使用自定义属性来定义两个图像的 URL。然后我们将它们设置为background-image每张牌面的。 跳转后更多!继续往下看↓参加关于前端和其中包括实用知识、现场会议、视频录制和友好的问答。关于设计系统、用户体验、网络性能和 CSS/JS。与 Brad Frost、 和许多其他人一起。