探索如何使用 CSS 重现光学错觉的趣味课程。
在本博文中,我们将玩得开心一点!实现这种光学错觉的方法肯定有 100 种,我只会与您分享我的想法,但鼓励您尝试自己的风格。试用演示并查看源代码。
如果您更喜欢视频,请观看此帖子的 YouTube 版本:
概览
这种错觉的名称是咖啡馆墙壁错觉。这张图片中没有任何弯曲的线条,但我们的眼睛却能感受到倾斜。虽然这可能令人难以置信,但重建它绝对能帮助您消除幻觉。
Markup
此表格的 HTML 是简单的行和列。<body>
是包含子项 <div class="row">
的容器。每行包含五个 <div
class="square">
元素。
<div class="row">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
…
样式
我选择了 CSS 网格,因为它似乎适合行的表述样式,并且还具有 justify-content
,这似乎是一种很好的对齐行子元素的方法。
车身造型
从正文样式开始,我使用 display: grid
和 grid-auto-rows
来提供行布局。您看到的行大小的 calc()
会将每行的边框考虑在内,这有助于使效果适合整个视口。
body {
display: grid;
grid-auto-rows: calc(20vh - 4px);
gap: 4px;
background: gray;
margin: 0;
}
行样式
在这里,我再次选择了网格,但我没有使用网格创建行,而是使用了 grid-auto-flow: column
将方向更改为列。然后,我定义列大小并向行添加一些内嵌内边距,以免框架超出视口边缘。然后,我会定位某些行,并将内容对齐到 center
或 end
,从而创建可点燃假象的偏移。
.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;
}
总结
你知道我怎么做到的了,你会怎么做?!🙂 浮点数?Flexbox?渐变?!
让我们一起采用多样化的方法,学习所有在 Web 上构建应用的方法。
制作一个演示版,在推特上向我发送链接,我会将其添加到下方的社区混剪部分!