探索如何使用 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 上构建的所有方式。
制作一个演示版,在推特上向我发送链接,我会将其添加到下方的社区混剪部分!