探索如何使用 CSS 重現視錯覺。
這篇文章將帶給你一點樂趣!要創造這種視錯覺,一定有 100 種方法,我只會分享自己的想法,但鼓勵你嘗試自己的風格。試用示範並查看來源。
如果你偏好觀看影片,請參閱這篇文章的 YouTube 版本:
總覽
這項錯覺的名稱是「Cafe Wall Illusion」。畫面上沒有任何歪斜的線條,但我們的眼睛會感覺到斜線。這可能很難相信,但重建這個項目絕對有助於您看穿錯覺。
標記
這類表格的 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?漸層?!
讓我們多方嘗試,瞭解在網路上建構應用程式的所有方式。
請製作示範作品,並在推特上傳連結,我會將其加入下方的社群重混曲目錄!
社群重混作品
- Mark Boots 使用漸層:示範和程式碼