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

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

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

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

码上掘金效果：

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

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;

}

复制代码

主要是利用到 grid 布局，以及 nth-child 属性；

其实像这类 视错觉 还有很多：

比如：赫林错觉

两条竖着的线其实平行的，但在汇聚到点的线的影响下，会显得中间是弯曲的。

还有：弗雷泽图形

它被称作：视错觉之王。

看起来是漩涡状的圈，实际上是同心圆组成的。是因为背景的黑白网格扭曲所造成的。

所以，有时候，完全相信眼睛也不一定对，大脑也会骗人。

利用 CSS 实现视错觉，做做网页效果，一定也会惊艳~~