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

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

image.png

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

image.png

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

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

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

码上掘金效果：

https://code.juejin.cn/pen/7163202033904779294

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

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 属性；

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

比如：赫林错觉

194a8de6-4c87-41a6-9ff4-4dd13b3f2b5a.gif

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

还有：弗雷泽图形

image.png

它被称作：视错觉之王。

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

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

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

推荐一篇文章：# 眼见不一定为实，设计中11种视错觉

原来很多页面设计效果、LOGO 设计都利用了【视错觉】这一点！

OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟 我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏

本文正在参加「金石计划 . 瓜分6万现金大奖」