棋盤揭示-css教學-PHP中文網

首頁

web前端

css教學

棋盤揭示

Joseph Gordon-Levitt

Mar 28, 2025 am 10:12 AM

Checkerboard Reveal

還記得我十歲的時候，表哥來我家做客。他（現在仍然是）個很酷的孩子，那種會帶著自己編程的國際象棋遊戲光盤的孩子。他的國際象棋版本和他本人一樣酷，因為棋盤的一部分會在每一步之後消失。

更酷的是？棋盤上消失的每一塊都會顯示出一張非常漂亮的圖片。

我認為同樣的想法可以製作出一些非常酷炫的用戶界面。只是，也許不需要用戶交互來顯示背景，它可以簡單地作為動畫播放。這就是我的最終成果：

這個想法很簡單，還有很多其他的方法可以實現，但這是我遵循的思路……

首先，我創建了一些標記

圖像可以在CSS 中作為背景處理在body元素上，或者一些設計成特定大小的<div>元素上。因此，暫時不需要處理這個問題。但是棋盤很有趣。這是一個圖案，上面寫滿了CSS Grid 的字樣，所以我用一個元素作為網格容器，裡面有很多其他的<code><div>元素。我不知道一個合法的國際象棋棋盤有多少方塊/正方形/無論什麼，所以我只是憑空選擇了數字7，然後將其平方得到49 個正方形。<pre class="brush:php;toolbar:false"><div> <div></div> <div></div> </div></pre> <p>是的，寫出所有這些<code><div>元素很痛苦，JavaScript 當然可以提供幫助。但是如果我只是在實驗，只需要開發人員的便利性，那麼使用Haml 就可以提供幫助：<pre class="brush:php;toolbar:false"> .grid - 49.times do %div</pre> <p>最終結果都一樣。無論哪種方式，這都給了我開始樣式設計所需的所有標記！</p> <h2 id="設置背景圖像">設置背景圖像</h2> <p>同樣，這可以在<code>body或其他元素上作為background-image發生，這取決於它的使用方式——只要它覆蓋整個空間即可。因為我無論如何都需要一個網格容器，所以我決定使用它。

 .checkerboard {
  background-image: url('walrus.jpg');
  background-size: cover;
  /* 可能需要其他屬性來正確定位圖像*/
}

漸變是光柵圖像文件的一部分，但我可以用某種在body元素上的疊加層來巧妙地處理，使用偽元素，例如:after 。哎呀，這正是CSS-Tricks 當前設計的常用技術。

樣式網格

是的，我使用了CSS Grid。製作一個7×7 的網格非常容易。

 .checkerboard {
  background-image: url('walrus.jpg');
  background-size: cover;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
}

我想一旦我們看到aspect-ratio得到廣泛支持，這將會好得多，至少如果我正確理解的話。我現在的問題是網格沒有保持任何比例。這意味著棋盤的方塊在不同的視口大小下都會變得很擠壓。不好。如果這非常重要，我們可以在此期間做一些小的技巧，但我決定保持原樣。

樣式方塊

它們在白色和深灰色之間交替出現，因此：

 .checkerboard > div {
  background-color: #fff;
}
.checkerboard > div:nth-child(even) {
  background-color: #2f2f2f;
}

信不信由你，我們的標記和样式已經完成了！剩下的就是……

動畫方塊

所有動畫需要做的就是將每個方塊從opacity: 1;轉換為opacity: 0; ，CSS 動畫非常適合這個。

 @keyframes poof {
  to {
    opacity: 0;
  }
}

太棒了！我甚至不需要設置起始關鍵幀！我所要做的就是調用方塊上的動畫。

 .checkerboard > div {
  animation-name: poof;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  background: #fff;
}

是的，我本可以在這裡使用動畫簡寫屬性，但我經常發現將它的組成屬性單獨分開更容易，因為……好吧，它們太多了，在一行中很難閱讀和識別。

如果您想知道為什麼在這裡需要animation-fill-mode ，那是因為它可以防止動畫在設置為forwards時循環回到動畫的開始。換句話說，當動畫結束後，每個方塊都會保持opacity: 0; ，而不是重新出現。

我真的很想做一些聰明的事情來交錯方塊的animation-delay ，但我遇到了一些障礙，最終決定放棄我使用100% 原生CSS 的努力，改用一些輕量級的SCSS。這樣，我就可以遍歷所有方塊，並使用一個相當標準的函數為每個方塊偏移動畫。所以，抱歉突然切換！那隻是旅程的一部分。

 $columns: 7;
$rows: 7;
$cells: $columns * $rows;

@for $i from 1 through $cells {
  .checkerboard > div:nth-child(#{$i}) {
    animation-delay: (random($cells) / $columns) s;
  }
}

讓我們分解一下：

有網格列數（ $columns ）、網格行數（ $rows rows ）和單元格總數（ $cells ）的變量。最後一個是前兩個相乘的積。如果我們知道我們總是在一個完美的正方形網格中工作，那麼我們可以對其進行一些重構，使用指數來計算單元格的數量。
然後對於1 到$cells總數（在本例中為49）之間的每個單元格實例，每個單獨的方塊都會根據其:nth-child()值獲得一個animation-delay 。因此，第一個方塊是div:nth-child(1) ，然後是div:nth-child(2) ，依此類推。查看演示中的編譯後的CSS，您將看到它如何全部展開。

 /* Yes, Autoprefixer is in there... */
.checkerboard > div:nth-child(1) {}
.checkerboard > div:nth-child(2) {}
/* etc. */

最後， animation-delay是一個計算，它取1 到$cells總數之間的隨機數，除以$columns的數量，並在值後面附加秒。這是最好的方法嗎？我不知道。這歸結於四處玩弄一些東西，然後找到對你來說感覺“正確”的東西。這對我來說感覺“正確”。

我真的很想發揮創意並使用CSS 自定義屬性，而不是求助於SCSS。我喜歡自定義屬性和值可以在客戶端更新，而SCSS 中計算出的值在構建時編譯並保持不變。同樣，這正是我非常想改用JavaScript 的地方。但是，我已經鋪好了床，只能睡在上面。

如果您早些時候查看了編譯後的CSS，那麼您將看到計算出的值：

 .checkerboard > div:nth-child(1) {
  animation-delay: 4.5714285714s;
}

.checkerboard > div:nth-child(2) {
  animation-delay: 5.2857142857s;
}

.checkerboard > div:nth-child(3) {
  animation-delay: 2.7142857143s;
}

.checkerboard > div:nth-child(4) {
  animation-delay: 1.5714285714s;
}

嗯，也許動畫應該是可選的……

有些人對運動和移動很敏感，因此最好更改設置，以便僅當用戶喜歡時才設置方塊的樣式和動畫。我們有一個媒體查詢來實現這一點！

 @media screen and (prefers-reduced-motion: no-preference) {
  .checkerboard > div {
    animation-name: poof;
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    background: #fff;
  }
  .checkerboard > div:nth-child(even) {
    background: #2f2f2f;
  }
}