棋盘揭示-css教程-PHP中文网

首页

web前端

css教程

棋盘揭示

Joseph Gordon-Levitt

Mar 28, 2025 am 10:12 AM

Checkerboard Reveal

还记得我十岁的时候，表哥来我家做客。他（现在仍然是）个很酷的孩子，那种会带着自己编程的国际象棋游戏光盘的孩子。他的国际象棋版本和他本人一样酷，因为棋盘的一部分会在每一步之后消失。

更酷的是？棋盘上消失的每一块都会显示出一张非常漂亮的图片。

我认为同样的想法可以制作出一些非常酷炫的用户界面。只是，也许不需要用户交互来显示背景，它可以简单地作为动画播放。这就是我的最终成果：

这个想法很简单，还有很多其他的方法可以实现，但这是我遵循的思路……

首先，我创建了一些标记

图像可以在 CSS 中作为背景处理在 body 元素上，或者一些设计成特定大小的 <div> 元素上。因此，暂时不需要处理这个问题。但是棋盘很有趣。这是一个图案，上面写满了 CSS Grid 的字样，所以我用一个元素作为网格容器，里面有很多其他的 <code><div> 元素。我不知道一个合法的国际象棋棋盘有多少方块/正方形/无论什么，所以我只是凭空选择了数字 7，然后将其平方得到 49 个正方形。 <pre class="brush:php;toolbar:false"><div> <div></div> <div></div> </div></pre> <p>是的，写出所有这些 <code><div> 元素很痛苦，JavaScript 当然可以提供帮助。但是如果我只是在实验，只需要开发人员的便利性，那么使用 Haml 就可以提供帮助： <pre class="brush:php;toolbar:false">.grid - 49.times do %div</pre> <p>最终结果都一样。无论哪种方式，这都给了我开始样式设计所需的所有标记！</p> <h2 id="设置背景图像">设置背景图像</h2> <p>同样，这可以在 <code>body 或其他元素上作为 background-image 发生，这取决于它的使用方式——只要它覆盖整个空间即可。因为我无论如何都需要一个网格容器，所以我决定使用它。

.checkerboard {
  background-image: url('walrus.jpg');
  background-size: cover;
  /* 可能需要其他属性来正确定位图像 */
}

渐变是光栅图像文件的一部分，但我可以用某种在 body 元素上的叠加层来巧妙地处理，使用伪元素，例如 :after。哎呀，这正是 CSS-Tricks 当前设计的常用技术。

样式网格

是的，我使用了 CSS Grid。制作一个 7×7 的网格非常容易。

.checkerboard {
  background-image: url('walrus.jpg');
  background-size: cover;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

我想一旦我们看到 aspect-ratio 得到广泛支持，这将会好得多，至少如果我正确理解的话。我现在的问题是网格没有保持任何比例。这意味着棋盘的方块在不同的视口大小下都会变得很挤压。不好。如果这非常重要，我们可以在此期间做一些小的技巧，但我决定保持原样。

样式方块

它们在白色和深灰色之间交替出现，因此：

.checkerboard > div {
  background-color: #fff;
}
.checkerboard > div:nth-child(even) {
  background-color: #2f2f2f;
}

信不信由你，我们的标记和样式已经完成了！剩下的就是……

动画方块

所有动画需要做的就是将每个方块从 opacity: 1; 转换为 opacity: 0;，CSS 动画非常适合这个。

@keyframes poof {
  to {
    opacity: 0;
  }
}

太棒了！我甚至不需要设置起始关键帧！我所要做的就是调用方块上的动画。

.checkerboard > div {
  animation-name: poof;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  background: #fff;
}

是的，我本可以在这里使用动画简写属性，但我经常发现将它的组成属性单独分开更容易，因为……好吧，它们太多了，在一行中很难阅读和识别。

如果您想知道为什么在这里需要 animation-fill-mode，那是因为它可以防止动画在设置为 forwards 时循环回到动画的开始。换句话说，当动画结束后，每个方块都会保持 opacity: 0;，而不是重新出现。

我真的很想做一些聪明的事情来交错方块的 animation-delay，但我遇到了一些障碍，最终决定放弃我使用 100% 原生 CSS 的努力，改用一些轻量级的 SCSS。这样，我就可以遍历所有方块，并使用一个相当标准的函数为每个方块偏移动画。所以，抱歉突然切换！那只是旅程的一部分。

$columns: 7;
$rows: 7;
$cells: $columns * $rows;

@for $i from 1 through $cells {
  .checkerboard > div:nth-child(#{$i}) {
    animation-delay: (random($cells) / $columns)   s;
  }
}

让我们分解一下：

有网格列数（$columns）、网格行数（$rows）和单元格总数（$cells）的变量。最后一个是前两个相乘的积。如果我们知道我们总是在一个完美的正方形网格中工作，那么我们可以对其进行一些重构，使用指数来计算单元格的数量。
然后对于 1 到 $cells 总数（在本例中为 49）之间的每个单元格实例，每个单独的方块都会根据其 :nth-child() 值获得一个 animation-delay。因此，第一个方块是 div:nth-child(1)，然后是 div:nth-child(2)，依此类推。查看演示中的编译后的 CSS，您将看到它如何全部展开。

/* Yes, Autoprefixer is in there... */
.checkerboard > div:nth-child(1) {}
.checkerboard > div:nth-child(2) {}
/* etc. */

最后，animation-delay 是一个计算，它取 1 到 $cells 总数之间的随机数，除以 $columns 的数量，并在值后面附加秒。这是最好的方法吗？我不知道。这归结于四处玩弄一些东西，然后找到对你来说感觉“正确”的东西。这对我来说感觉“正确”。

我真的很想发挥创意并使用 CSS 自定义属性，而不是求助于 SCSS。我喜欢自定义属性和值可以在客户端更新，而 SCSS 中计算出的值在构建时编译并保持不变。同样，这正是我非常想改用 JavaScript 的地方。但是，我已经铺好了床，只能睡在上面。

如果您早些时候查看了编译后的 CSS，那么您将看到计算出的值：

.checkerboard > div:nth-child(1) {
  animation-delay: 4.5714285714s;
}

.checkerboard > div:nth-child(2) {
  animation-delay: 5.2857142857s;
}

.checkerboard > div:nth-child(3) {
  animation-delay: 2.7142857143s;
}

.checkerboard > div:nth-child(4) {
  animation-delay: 1.5714285714s;
}

嗯，也许动画应该是可选的……

有些人对运动和移动很敏感，因此最好更改设置，以便仅当用户喜欢时才设置方块的样式和动画。我们有一个媒体查询来实现这一点！

@media screen and (prefers-reduced-motion: no-preference) {
  .checkerboard > div {
    animation-name: poof;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    background: #fff;
  }
  .checkerboard > div:nth-child(even) {
    background: #2f2f2f;
  }
}