CSS 如何实现“咖啡墙错觉”效果？神奇~
掘金安东尼 2022-11-09
CSS
你觉得以下左右两张图是一样的吗？
别急，再看一张图，你觉横线之间是平行的吗？
咖啡墙错觉实际上是一种几何光学视错觉，简而言之就是“大脑没有真实的解释眼睛所看到的画面”。
前面图中的左右两张图实际上是一样的；后面图中的横线实际上也是平行的，神奇吧？
本篇要做的就是用 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
主要是利用到 grid 布局，以及 nth-child 属性；
其实像这类 视错觉 还有很多：
两条竖着的线其实平行的，但在汇聚到点的线的影响下，会显得中间是弯曲的。
它被称作：视错觉之王。
看起来是漩涡状的圈，实际上是同心圆组成的。是因为背景的黑白网格扭曲所造成的。
所以，有时候，完全相信眼睛也不一定对，大脑也会骗人。
利用 CSS 实现视错觉，做做网页效果，一定也会惊艳~~
推荐一篇文章：# 眼见不一定为实，设计中11种视错觉 (opens new window)
原来很多页面设计效果、LOGO 设计都利用了【视错觉】这一点！
OK，以上便是本篇分享，希望各位工友喜欢~ 欢迎点赞、收藏、评论 🤟
我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏
