你觉得以下左右两张图是一样的吗?
别急,再看一张图,你觉横线之间是平行的吗?
咖啡墙错觉实际上是一种几何光学视错觉,简而言之就是“大脑没有真实的解释眼睛所看到的画面”。
前面图中的左右两张图实际上是一样的;后面图中的横线实际上也是平行的,神奇吧?
本篇要做的就是用 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 实现视错觉,做做网页效果,一定也会惊艳~~
推荐一篇文章:# 眼见不一定为实,设计中11种视错觉
原来很多页面设计效果、LOGO 设计都利用了【视错觉】这一点!