营造弯曲的网格幻觉

探索如何使用 CSS 重现光学错觉的趣味课程。

在本博文中,我们将玩得开心一点!实现这种光学错觉的方法肯定有 100 种,我只会与您分享我的想法,但鼓励您尝试自己的风格。试用演示查看源代码

如果您更喜欢视频,请观看此帖子的 YouTube 版本:

概览

这种错觉的名称是咖啡馆墙壁错觉。这张图片中没有任何弯曲的线条,但我们的眼睛却能感受到倾斜。虽然这可能令人难以置信,但重建它绝对能帮助您消除幻觉。

Markup

此表格的 HTML 是简单的行和列。<body> 是包含子项 <div class="row"> 的容器。每行包含五个 <div class="square"> 元素。

<div class="row">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>
…

样式

我选择了 CSS 网格,因为它似乎适合行的表述样式,并且还具有 justify-content,这似乎是一种很好的对齐行子元素的方法。

车身造型

从正文样式开始,我使用 display: gridgrid-auto-rows 来提供行布局。您看到的行大小的 calc() 会将每行的边框考虑在内,这有助于使效果适合整个视口。

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}

行样式

在这里,我再次选择了网格,但我没有使用网格创建行,而是使用了 grid-auto-flow: column 将方向更改为列。然后,我定义列大小并向行添加一些内嵌内边距,以免框架超出视口边缘。然后,我会定位某些行,并将内容对齐到 centerend,从而创建可点燃假象的偏移。

.row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 9vw;
  padding-inline: 4vw;
  gap: 10vw;
  background: white;
}

.row:nth-child(even) {
  justify-content: center;
}

.row:nth-child(3n) {
  justify-content: end;
}

方形样式

现在只剩更改方块的颜色和添加边框了:

.square {
  border-inline: 4px solid gray;
  background: black;
}

总结

你知道我怎么做到的了,你会怎么做?!🙂 浮点数?Flexbox?渐变?!

让我们一起采用多样化的方法,学习所有在 Web 上构建应用的方法。

制作一个演示版,在推特上向我发送链接,我会将其添加到下方的社区混剪部分!

社区混剪作品