多年來，我認為拖放游戲，尤其是涉及輪換，空間邏輯和拼圖解決方案的游戲 - 是JavaScript的獨家領(lǐng)域。直到一天，我都問AI：

“是否可以僅使用CSS構(gòu)建一個完全互動的Tangram益智游戲？”

答案： “不 - 不是。您需要JavaScript。”這就是我需要證明的所有動力。

但是首先，讓我們問一個明顯的問題：為什么有人會這樣做？

出色地…

• 知道CSS在創(chuàng)建交互式UI時可以推動多遠。
• 為了提高我的CSS技能。
• 很有趣！

很公平？

現(xiàn)在，這是毫不奇怪的事實：CSS并不是為此做出的。這不是邏輯語言，老實說，它也不是特別動態(tài)的。 （當然，我們現(xiàn)在有CSS變量和一些方便的內(nèi)置功能，houray?。?/p>

在JavaScript中，我們自然會從功能，循環(huán)，條件，對象，比較方面進行思考。我們將邏輯，抽象的內(nèi)容寫入方法中，并最終運送瀏覽器理解的捆綁包。一旦發(fā)貨？我們很少看那個最終的JavaScript捆綁包 - 我們只是專注于保持它的精益。

現(xiàn)在問自己：這不是Sass對CSS的作用嗎？

當我們可以使用Mixins和功能來生成它時，我們?yōu)槭裁匆止ぞ帉憻o休止的重復(fù)CSS線 - 干凈，有效地生成它，并且只要優(yōu)化輸出，我們就可以使用Mixins和功能來清理，有效地生成多少線？

因此，我們將其進行了測試，事實證明Sass可以替換JavaScript，至少在低級邏輯和拼圖行為時。除了地圖，混音，功能和大量數(shù)學(xué)之外，我們都設(shè)法使我們的Tangram難題栩栩如生，不需要JavaScript。

讓（僅CSS）游戲開始！ ??

游戲

該游戲由七個作品組成：經(jīng)典的Tangram套裝。自然，這些碎片可以布置成一個完美的正方形（以及許多其他形狀）。但是我們不僅需要靜態(tài)碎片。

所以這就是我正在建立的：

• 拼圖目標，這是玩家必須重新創(chuàng)建的目標形狀。
• 一個開始按鈕，將所有碎片都放入舞臺區(qū)域。
• 每個作品都是可點擊且交互式的。
• 難題應(yīng)該讓用戶知道何時弄錯了一件，并在完成難題時慶祝。

HTML結(jié)構(gòu)

我首先設(shè)置HTML結(jié)構(gòu)，這并不是一件很小的任務(wù)，考慮到涉及的元素數(shù)量。

• 每個形狀都得到了七個無線電按鈕。我在復(fù)選框上選擇了收音機來利用它們的內(nèi)置排他性。在同一組中只能選擇一個。這使跟蹤哪個形狀和狀態(tài)當前處于活動狀態(tài)變得更加容易。
• 開始按鈕？也是無線電輸入。一個復(fù)選框也可以工作，但是為了保持一致性，我全面扎根了收音機。
• 拼圖圖本身只是一個普通的舊
  ，簡單有效。
• 對于旋轉(zhuǎn)，我們添加了八個無線電按鈕，每個按鈕代表45度增量：45°，90°，135°，一直到360°。這些模擬旋轉(zhuǎn)完全控制在CSS中。
• 每個潛在的陰影位置也都有自己的廣播按鈕。 （是的，我知道很多。）
• 為了將其全部包裹起來，我在一個內(nèi)包含一個經(jīng)典的重置按鈕
  使用，因此玩家可以在任何時候輕松重新開始。

  考慮到所需的元素數(shù)量，我使用PUG更有效地生成HTML。這純粹是方便的選擇。它不會以任何方式影響難題的邏輯或行為。

  以下是編譯的HTML的樣本。乍一看，它看起來可能不堪重負（這只是其中的一部分?。?，但它說明了所涉及的結(jié)構(gòu)復(fù)雜性。本節(jié)倒塌以不核定屏幕，但是如果您想探索它，則可以擴展。

  打開HTML代碼

  <div>
    <div></div>
    <div></div>
    <form>
      <input type="checkbox" autofocus>
      <button type="reset">重新啟動</button>
      <label for="start">開始</label>
      <div>
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-active">
        <!-- Inputs for others tans -->
        <input type="radio" name="tan-active">
        <input type="radio" name="tan-rotation">
        <input type="radio" name="tan-rotation">
        <!--radios for 90, 225, 315, 360 -->
  
        <input type="checkbox" name="tan-rotation">
        <input type="checkbox" name="tan-rotation">
        <!-- radio for every possible shape shadows-->
  
        <label for="rotation-45">?</label>
        <label for="rotation-90">?</label>
        <!--radios for 90, 225, 315, 360 -->
        <label for="rotation-reset">?</label>
  
        <label for="blueTriangle-tan"></label>
        <div></div>
        <!-- labels for every tan and disabled div -->
  
        <label for="blueTriangle-tan-1-90"></label>
        <label for="blueTriangle-tan-1-225"></label>
        <!-- labels radio for every possible shape shadows-->
        <div></div>
      </div>
    </form>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>

  為形狀數(shù)據(jù)創(chuàng)建地圖

  現(xiàn)在，HTML骨架已經(jīng)準備好了，是時候給它注入一些真正的力量了。那是我們的Sass地圖進入的地方，這是拼圖邏輯開始發(fā)光的地方。

  注意： SASS中的地圖保存對鍵和值對，并使其易于通過其相應(yīng)的鍵查找值。就像javaScript中的對象一樣，python中的字典以及c。

  我正在繪制控制每個Tangram作品（TAN）所需的所有核心數(shù)據(jù)：其顏色，形狀，位置甚至相互作用邏輯。這些地圖包含：

  • 每棕褐色
  • 定義其形狀的theclip-pathcoordin
  • 每個棕褐色的初始位置，
  • blockingDiv的位置（選擇棕褐色時會禁用相互作用），
  • 陰影位置（在任務(wù)板上顯示的棕褐色輪廓的坐標），
  • 網(wǎng)格信息，以及
  • 獲勝組合 - 每個棕褐色的確切目標坐標，標記正確的解決方案。

   $顏色：（藍色：＃53A0E0，黃色：＃f7db4f， / *每個tan * /）;
  $ nth-Child-Grid：（1：（2，3，1，2，），2：（3，4，1，2，），4：（1，2，2，3，）， / *要添加更多條目 * /）;
  $ blueposiblePositions：（45：無，90：（（6.7，11.2），135：無，180：無， / *定義的位置最高為360度 * /）;
  / *其他曬黑 */
  
  / *為每個tan定義的數(shù)據(jù) */
  $ tanshapes ：（
    藍色：（（
      顏色：map.get（$顏色，藍色），
      剪輯 - （0 0，50 50，0 100，），），
      rot -btn位置：（-20，-25，），
      退出模式-BTN位置：（-20，-33，），，
      棕褐色：（-6，-37，），
      diable -lab位置：（-12，-38，），
      可能位置：$ blueposiblepositions，
      正確位置：（（4.7，13.5），（18.8，13.3），），），，
      轉(zhuǎn)化原始：（4.17，12.5，），
    ），
  ）；
  
  / *剩余的7個組合 */
  $ winningCombinations ：（
    combo1 ：（
      （BlueTriangle，1，360），
      （Yellowtriangle，1，225），
      （Pinktriangle，1，180），
      （Redtriangle，4，360），
      （Purpletriangle，2，225），
      （Square，1，90），
      （Polygon，4，90），
    ），
  ）；

  您可以在Codepen上看到這一點，其中這些地圖驅(qū)動了每個拼圖的實際外觀和行為。在這一點上，預(yù)覽尚無明顯的變化。我們只是準備好并存儲數(shù)據(jù)以供以后使用。

  使用Mixin從地圖上讀取

  主要想法是創(chuàng)建可重復(fù)使用的混合物，該混合蛋白將在需要時從地圖中讀取數(shù)據(jù)并將其應(yīng)用于相應(yīng)的CSS規(guī)則。

  但是在此之前，我們通過做出一個關(guān)鍵決定將事物提升到更高的水平：我們從不直接在地圖內(nèi)進行硬編碼。取而代之的是，我們構(gòu)建了一個可重復(fù)使用的效用函數(shù)，該功能將所需的單元（例如，VMIN，PX等）動態(tài)地添加到任何數(shù)字值時。這樣，我們什么時候可以使用我們的地圖。

   @function get-coordinates（$ data，$ key，$ saparator，$ unit）{
    $坐標：null;
  
    //檢查第一個參數(shù)是否是地圖
    @if meta.type-of（$ data）==“ map” {
      //如果地圖包含指定的密鑰
      @if map.has-key（$ data，$ key）{
        //獲取與密鑰關(guān)聯(lián)的值（預(yù)計將是坐標列表）
        $坐標：map.get（$ data，$ key）;
      }
  
    //如果第一個參數(shù)是列表
    } @else如果meta.type-of（$ data）==“ list” {
      //確保密鑰是列表中的有效索引（基于1）
      @if meta.type-of（$ key）==“ number”和$ key> 0和$ key <p>當然，迄今為止，沒有什么都沒有出現(xiàn)，但是真正的魔術(shù)現(xiàn)在開始了。</p><p>現(xiàn)在，我們繼續(xù)寫Mixins。我將詳細說明第一個混合物的方法，其余的將通過評論來描述。</p><p>第一個混合蛋白根據(jù)映射中存儲的值動態(tài)地將其應(yīng)用于兒童元素上。地圖中的每個條目都對應(yīng)于元素索引（1至8），并包含四個值的列表：[start-col，end-col，start-low，start-low，end-row]。</p><pre rel="SCSS" data-line=""> @mixin tanagram-Grid-position（$ nth-child-Grid）{
    //循環(huán)通過數(shù)字1到8，對應(yīng)于Tanam零件
    @for $ i從1到8 {
  
      //檢查地圖是否包含當前作品的鑰匙（1-8）
      @if map.has-key（$ nth-child-grid，$ i）{
  
        //獲取此作品的網(wǎng)格值：[啟動柱，末端柱，啟動行，終排]
        $ values：map.get（$ nth-child-Grid，$ i）;
  
        //針對第n個孩子（件）并設(shè)置其網(wǎng)格位置
        ＆：nth-??child（＃{$ i}）{
          //設(shè)置網(wǎng)格列：基于列表中的前兩個項目的啟動和結(jié)束值
          網(wǎng)格列：＃{list.nth（$ values，1）} /＃{list.nth（$ values，2）};
  
          //設(shè)置網(wǎng)格行：基于列表中的最后兩個項目的啟動和結(jié)束值
          網(wǎng)格行：＃{list.nth（$ values，3）} /＃{list.nth（$ values，4）};
        }
      }
    }
  }

  我們可以期望生成以下CSS：

   .tanagram-box：nth-??child（1）{
    網(wǎng)格列：2 /3;
    網(wǎng)格行：1/2；
  }
  
  .tanagram-box：nth-??child（2）{
    網(wǎng)格列：3 /4；
    網(wǎng)格行：1/2；
  }

  在這種混合物中，我的目標實際上是創(chuàng)建所有形狀（棕褐色）。我正在使用clip-path。有一些想法使用精美的SVG圖像，但是這個測試項目更多是關(guān)于測試邏輯，而不是專注于精美的設(shè)計。因此，最簡單的解決方案是根據(jù)尺寸在正方形（所有曬黑的初始位置）時根據(jù)尺寸切割元素。

  因此，在這種情況下，通過靜態(tài)計算，$ tanshapesmap通過theclip-pathproperty進行了更新：

  剪輯 - （0 0，50 50，0 100）;

  這包含所有棕褐色的剪輯點。從本質(zhì)上講，這種混合物形成每個棕褐色。

   @mixin set-tan-clip-path（$ tanname，$ values）{
    //初始化一個空列表以保留最終的剪貼電池點
    $ clip-path-Points：（）;
  
    //從地圖中提取“剪輯路徑”數(shù)據(jù)，其中包含坐標對
    $ clip-path-key：map.get（$ values，clip-path）;
  
    //獲取坐標對循環(huán)的坐標數(shù)
    $ count：list.length（$ clip-path-key）;
  
    //循環(huán)穿過每個坐標點
    @for $ i從1到$ count {
      //將每對數(shù)字轉(zhuǎn)換為帶有單位的格式化坐標字符串
      $ current-point：get-coordinates（$ clip-path-key，$ i，“”，“”％）;
  
      //將格式的坐標添加到列表中，用逗號分開每個點
      $ clip-path點：list.append（$ clip-path-points，＃{$ current-point}，comma）;
    }
  
    //使用配置的背景顏色的預(yù)覽元素（實驗室版本）的樣式
    #tan＃{$ tanname} lab {
      背景：map.get（$ values，color）;
      剪輯 -  path：polygon（＃{$ clip-path-points}）; //應(yīng)用剪貼電池點的完整列表
    }
  
    //將相同的剪輯路徑應(yīng)用于實際的棕褐色元素
    。＃{$ tanname} {
      剪輯 -  path：polygon（＃{$ clip-path-points}）;
    }
  }

  CSS中的輸出應(yīng)為：

   .bluetriangle {
    剪輯路徑：多邊形（0％0％，50％50％，0％100％）；
  }
  / *其他曬黑 */

  啟動邏輯

  好吧，現(xiàn)在我想澄清游戲加載時應(yīng)該首先發(fā)生的事情。

  首先，單擊“開始”按鈕，所有曬黑都“轉(zhuǎn)到他們的位置”。實際上，我們將它們分配給Atransform：Translate（）具有特定坐標和旋轉(zhuǎn)。

   .START：檢查?。
    轉(zhuǎn)化原始：4.17Vmin 12.5Vmin;
    變換：translate（-6vmin，-37vmin）旋轉(zhuǎn)（360DEG）;
    光標：指針；
  }

  因此，我們?nèi)匀槐３诌@種模式。我們使用變換，并簡單地更改棕褐色及其陰影的位置或角度（在地圖中）。

  單擊任何棕褐色時，出現(xiàn)旋轉(zhuǎn)按鈕。通過單擊它，棕褐色應(yīng)圍繞其中心旋轉(zhuǎn)，然后在每次隨后的單擊中繼續(xù)進行。實際上有八個無線電按鈕，每次點擊時，一個都會消失，而下一個按鈕出現(xiàn)。當我們到達最后一個時，單擊它會消失，而第一個重新出現(xiàn)。這樣，我們就會得到單擊相同按鈕（當然是相同的樣式）并能夠無限單擊（旋轉(zhuǎn)棕褐色）的印象。這正是以下混合素啟用。

   @mixin set-tan-rotation-states（$ tanname，$ values，$ angles，$ color）{
    //此Mixin根據(jù)TAN的配置動態(tài)應(yīng)用旋轉(zhuǎn)UI樣式。
    //當旋轉(zhuǎn)狀態(tài)處于活動狀態(tài)時，它控制旋轉(zhuǎn)按鈕和視覺反饋的定位和外觀。
    @each $ angle in $ angles {
      ＆?#ROT＃{$ angle} {transform：translate（get-coordinates（$ values，rot-btn-position，'，'，'，vmin））;背景：$ color;}
      ＆?＃rotation-＃{$ angle}：檢查{
        @each $ key in map.keys（$ tanshapes）{
          ＆?#tan＃{$ key} labres {可見性：可見;背景：RGBA（0,0,0,0.4）; }
          ＆?#tan＃{$ key} lab {opacity：.3; }
          ＆?#rotreset {可見性：可見; }
        } 
      }
    }
  }

  生成的CSS應(yīng)該是：

   ＃bluetriangle-tan：檢查?＃rotation-45：檢查?#tanbluetrianglelab {
    變換：translate（-6vmin，-37vmin）旋轉(zhuǎn)（45DEG）;
  }
  
  ＃BlueTriangle-Tan：檢查?＃rotation-45：檢查?#tanbluetrianglelabres {
    可見性：隱藏；
  }

  好的，以下混合蛋白使用theset-clip-pathsetset-rotationMixins。它們包含有關(guān)TAN的所有信息及其行為與棕褐色的單擊以及選擇哪個旋轉(zhuǎn)以及其位置（如第二個混合物中定義）。

   @mixin生成tan形狀和相互作用（$ tanshapes）{
  //從$ tanshapes地圖中為每個棕褐色形狀應(yīng)用樣式邏輯和UI交互。
    @each $ tanname，$ tanshapes中的$ values {
      $ color：color.scale（map.get（$ values，color），$ lightness：10％）; 
      $ ANGLE ：（ 45、90、135、180、225、270、315、360）; 
      @include set-tan-clip-path（$ tanname，$ values）;
  
      ## {$ tanname} -tan：檢查{
        ＆?#tan＃{$ tanname} res {visibility：hidden; }
        ＆?#tan＃{$ tanname}實驗{opacity：1！
        @each $ key in map.keys（$ tanshapes）{
            ＆?#tan＃{$ tanname} res：檢查?#tan＃{$ key} labres {visibility：cissible;}
        }
        ＆?＃rot45 {顯示：flex;可見性：可見;}
        ＆?#rotreset {transform：translate（get-coordinates（$ values，exit-mode-btn-position'，'，'，vmin））; }
        @include set-tan-rotation-states（$ tanname，$ values，$ angles，$ color）;
      }  
    }
  }

   @mixin set-initial-tan-position（$ tanshapes）{
  //此Mixin設(shè)置了交互式（``LAB'）和Shadow（`labRes'）版本的初始位置和轉(zhuǎn)換
  //每個棕褐色形狀，基于$ tanshapes地圖中提供的坐標。
   @each $ tanname，$ tanshapes中的$ values {
      ＆?。shadow #tan＃{$ tanname} lab {
        變換原始：get-coordinate（$ values，transform-origin，''，vmin）;
        變換：translate（get-coortinate（$ values，tan-position'，'，'，vmin））旋轉(zhuǎn)（360DEG）;
        光標：指針；
      }
      ＆?。shadow #tan＃{$ tanname} labres {
        可見性：隱藏；
        變換：轉(zhuǎn)換（get-coordinate（$ values，diable-lab-lib-position'，'，'，vmin））; 
      }
    }
  }

  如前所述，當單擊棕褐色時，可見的一件事就是它的陰影 - 一個剪影，出現(xiàn)在任務(wù)板上。

  這些陰影位置（坐標）當前是靜態(tài)定義的。每個陰影在地圖上都有一個特定的位置，Mixin讀取此數(shù)據(jù)并將其應(yīng)用于使用Transform：translate（）的陰影。

  當旋轉(zhuǎn)點擊棕褐色時，任務(wù)板上可見陰影的數(shù)量可能會改變，以及它們的角度。

  當然，命名慣例受到特殊護理。每個影子元素都會獲得一個獨特的ID，該ID由名稱（從其父棕褐色繼承）和一個代表其在給定角度的序列位置的數(shù)字。

  很酷，對吧？這樣，我們完全避免了復(fù)雜的命名模式！

   @mixin渲染可及的tan位置（$ name，$ angle，$ aunderPositions，$ convibility，$ color，$ id，$ id，$ transformorigin）{
      //此混合蛋白根據(jù)其名稱，旋轉(zhuǎn)角度和配置圖生成樣式的棕褐色形狀。
      //它處理正方形和多邊形，將其旋轉(zhuǎn)角度歸一化，并在存在位置時應(yīng)用變換樣式。}
    @if $ name =='square'{
      $ ANGLE：歸一化 - 角度（$ Angle）; // strumanizujemo ugao ako je u pitanju廣場
    } @else如果$ name =='polygon'{
      $ ANGLE：歸一化polygon-angle（$ Angle）;
    }
    @if map.has-key（$ aunterpositions，$ angle）{
      $ values：map.get（$ aughterPositions，$ angle）;
  
      @if $ values！=無{
        $ count：list.length（$ value）;
  
        @for $ i從1到$ count {
          $位置：get-coordinates（$ values，$ i，'，'，vmin）;
          ＆?#tan＃{$ name}實驗 - ＃{$ i}  - ＃{$ angle} { 
            @if $ visibility ==可見{
              可見性：可見；
              背景色：$顏色；
              不透明度：.2;
              z索引：2;
              transform-origin：＃{$ transformorigin};
              變換：translate（＃{$ position}）旋轉(zhuǎn)（＃{$安排} deg）;
            } @Else如果$ visibility ==隱藏{可見性：隱藏; }
            ＆：懸停{不透明度：0.5;光標：指針； }
          }
        }
      }
    }
  }

  生成的CSS：

   ＃bluetriangle-tan：檢查?＃tanbluetrianglelab-1-360 {
    可見性：可見；
    背景色：＃53A0E0;
    不透明度：0.2;
    z索引：2;
    轉(zhuǎn)化原始：4.17Vmin 12.5Vmin;
    變換：轉(zhuǎn)換（4.7Vmin，13.5Vmin）旋轉(zhuǎn)（360DEG）;
  }

  下一個混合物與上一個混合物綁定，并在使用該按鈕旋轉(zhuǎn)父母棕褐色時管理棕褐色陰影的何時以及如何出現(xiàn)。它聽當前旋轉(zhuǎn)角度，并檢查是否有針對該特定角度定義的陰影位置。如果有的話，它會顯示它們；如果沒有 - 沒有陰影！

   @mixin渲染可靠位置 - 逐鏈{
     //該混合物將旋轉(zhuǎn)旋轉(zhuǎn)到每個棕褐色形狀。它循環(huán)穿過每個棕褐色，計算每個角度的可能位置，并處理可見性和轉(zhuǎn)換。
     //它確保正確應(yīng)用旋轉(zhuǎn)，包括處理各種棕褐色位置和可見性狀態(tài)之間的過渡。
   @each $ tanname，$ tanshapes中的$ values {
      $可能的位置：map.get（$ values，poss-positions）;
      $ possibletanscolor：map.get（$ values，color）;
      $有效位置：get-coordinates（$ values，正確位置，'，'，vmin）;
      $ transformOrigin：get-coordinates（$ values，transform-origin，''，vmin）; 
      $ rotresposition：get-coordinates（$ values，exit-mode-btn-loction'，'，'，vmin）;
      $ angle：0;
      @for $ i從1到8 {
        $ angle：$ i * 45;
        $ nextangle：if（$ Angle 45> 360，45，$ Angle 45）;
        @include渲染位置 - 饋送task（$ tanname，$ angle，$ aunderPositions，$ possibletanscolor，＃{$ tanname} -tan，$ valleposition，$ transformOrigin，$ transformOrigin，$ rotResposition）;   
          ## {$ tanname} -tan {
          @include渲染鍵tan位置（$ tanname，$ angle，$ aunderpositions，hidden，$ possibletanscolor，＃{$ tanname} -tan，$ transformoRigin）
        }
          ## {$ tanname} -tan：檢查{
            @include渲染鍵tan位置（$ tanname，360，$ aunterPositions，cisible，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
            ＆?＃rotation-＃{$ angle}：檢查{
              @include渲染鍵tan位置（$ tanname，360，$ aunderpositions，hidden，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
              ＆?#tan＃{$ tanname} lab {transform：transforate（get-coordinates（$ values，tan-position，'，'，'，vmin））旋轉(zhuǎn)（＃{$ agne} deg）;}
              ＆?#tan＃{$ tanname} labres {visibility：hidden; }
              ＆?#ROT＃{$ angle} {可見性：隱藏; }
              ＆?#ROT＃{$ nextangle} {可見性：可見} 
              @include渲染鍵tan位置（$ tanname，$ angle，$ aunderPositions，cisible，$ possibletanscolor，＃{$ tanname} -tan，$ transformOrigin）;
          }
        }
      }
    }
  }

  當單擊棕褐色的陰影時，相應(yīng)的棕褐色應(yīng)移至該陰影的位置。然后，下一個混合物檢查了這個新位置是否是解決難題的正確位置。如果正確，棕褐色會產(chǎn)生短暫的閃爍效果并變得不可敲打，發(fā)出信號已正確放置。如果不正確，棕褐色只是留在陰影的位置。沒有效果，并且仍然可拖動/可單擊。

  當然，每個棕褐色都有所有正確位置的列表。由于有些曬黑的大小相同 - 有些甚至可以組合形成更大的現(xiàn)有形狀 - 我們有多種有效的組合。對于這項駱駝任務(wù)，所有這些任務(wù)都被考慮在內(nèi)。創(chuàng)建了具有這些組合的專用地圖，以及讀取和應(yīng)用它們的混合蛋白。

  在游戲結(jié)束時，當將所有曬黑的位置放在正確的位置時，我們會觸發(fā)“合并”效果 - 駱駝的輪廓變黃。那時，唯一剩下的動作是單擊重新啟動按鈕。

  好吧，那很長，但是當您選擇樂趣（盡管艱難而冗長）時，這就是您得到的。都是對僅CSS魔術(shù)的頌歌！