这个有趣的探索展示了使用 CSS 重现视错觉效果的各种方法。
我们将从这篇博文中获得一点乐趣!有 100 种方法可以实现这种视觉错觉,我只是想与您分享我的想法,但鼓励您尝试一下自己的风格。试用演示版并查看源代码。
如果你更喜欢视频,可以参考本博文的 YouTube 版本:
概览
这种错觉的名称是 Cafe Wall Illusion。不过,我们的眼睛可以感知斜向,而在任何地方都找不到弯曲的线条。这或许很难相信,但重建它肯定能帮助您透过这个幻觉。
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 上构建网站的所有方法。
只需创建一个演示,点击 tweet me 链接,我就会将其添加到下方的“社区混剪”部分中!