使用CSS Grid重新创建Fool Mate象棋

当Firefox 66发布时，我和其他一些布局爱好者真正兴奋的功能之一就是在使用CSS Grid时能够为网格行和列（除了网格间隙）设置动画。它一直写在规范中，但浏览器实现它需要一些时间。

我之前在Bits博客上写了一篇介绍性文章，但还有更多要探索的内容。那篇文章链接到我能找到的尽可能多的动画演示，但我一直在思考的是Andrew Harvard的DVD徽标。

我首选的确定演示工作原理的方法是使用Firefox DevTools观察它。它让我大吃一惊。来吧，亲自试试吧，我等一下。只要您使用的是Firefox 66或更高版本，徽标就应该在嵌入式设备周围弹跳。

好吧，对于那些选择不以任何理由自己尝试的人，这里有一个GIF，但它并不是那么好的品质。

我不是DevTools工程师，但我希望确保网格检查员完全支持网格行和列的动画，这意味着当行号被切换时，它们也被动画化了。

DVD徽标教给我的是什么

对我来说，当我第一次看到没有检查的动画时，我首先想到的是网格项目正在整个网格中进行动画处理。但事实并非如此。至少，不是直接的。从某种意义上说，网格项目是动画的，但不是我想象的那样。

这就是我认为它的工作原理（扰流板：它不是）

动画的内容是网格行或列。这就是为什么我们使用DevTools产生了很酷的效果（这对我很酷，我不了解你……）但这也意味着你必须扭曲你的网格以使其中的内容生动。

这实际上可以动画

在讨论CSS网格如何改变网页布局时，我最喜欢使用的类比之一就是比较网格项的位置，比如将棋子放在棋盘上。因此，我的下一个想法是创建一个棋盘，棋盘上可以动画。

但是一旦我弄清楚网格项目的动画是如何起作用的，我就意识到了这一挑战。我无法维持一个普通的棋盘并同时移动棋子。

所以你需要移动一些东西

如果你期待这个问题有一些非常智能解决方案，我很抱歉让你失望，但我的解决方案是最不智能。需要移动的每个部件都在自己的网格中，并且所有网格都通过定位堆叠在彼此之上。

朋友，这都是骗局。

但它有效，所以那里。

因此，傻瓜的伴侣也被称为国际象棋中的双动同伴。根据维基百科：

傻瓜的伴侣之所以得名，是因为只有在白方犯下非常大错的情况下才会出现这种情况。

White的开场动作是f3，然后Black用g4回应，然后White回到g4而Black回到Qh4，一切都结束了。这有不同之处，但我选择了维基百科上的默认版本。我之所以选择Fool's Mate是因为它只涉及总共4次动画制作。 _（ツ）_ /¯

创建国际象棋棋盘

让我们谈谈国际象棋棋盘，因为我仍然有点像这样的结果。我选择了黑色位于顶部且白色位于底部的电路板配置。我猜大多数人会首先考虑为棋盘上的每个方块创建64个网格项目。

但我想减少加价。因此，我只创建了28个网格项作为我的静态棋子，而不是这样做 linear-gradient 在网格容器上生成必需的棋盘图案。

此外，每个棋子都有表情符号支持。我的表情符号棋，谢谢。

 class="grid board">    class="grid__item piece">♜