CSS 如何实现“咖啡墙错觉”效果？神奇~

lxf2023-02-17 01:51:38

首页 > 经验
> 正文

你觉得以下左右两张图是一样的吗？

别急，再看一张图，你觉横线之间是平行的吗？

CSS 如何实现“咖啡墙错觉”效果？神奇~

咖啡墙错觉实际上是一种几何光学视错觉，简而言之就是“大脑没有真实的解释眼睛所看到的画面”。

前面图中的左右两张图实际上是一样的；后面图中的横线实际上也是平行的，神奇吧？

本篇要做的就是用 css 实现类似的“咖啡墙错觉”效果，用在网页修饰中，可彰显逼格。

码上AdminJS效果：

确实这样，没有写任何斜线的效果，但是视觉看起来，横线像是在倾斜。

CSS 代码实现：

body {
  display: grid;
  grid-auto-rows: calc(20vh - 4px);
  gap: 4px;
  background: gray;
  margin: 0;
}
.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;
}