使用 html css 和 javascript 的卡片配對遊戲在 Instagram 上關注我們：https://www.instagram.com/webstreet_code/

在 Instagram 上追蹤我們：https://www.instagram.com/webstreet_code/

  
  
  <title>卡牌比賽遊戲</title>
  
    身體 {
      字體系列：Arial、無襯線字體；
      背景：線性漸變（-45deg，#1a2a6c，#b21f1f，#fdbb2d，#0f2027）；
      背景大小：400% 400%；
      動畫：gradientBG 8s 輕鬆無限；
      顏色：#fff；
      顯示：柔性；
      彎曲方向：列；
      對齊項目：居中；
      調整內容：居中；
      高度：100vh；
      保證金：0；
    }

    @關鍵幀梯度BG {
      0% { 背景位置: 0% 50%; }
      50% { 背景位置：100% 50%; }
      100% { 背景位置：0% 50%; }
    }

    h1 {
      字體大小：2rem；
      下邊距：20px；
    }

    。網格 {
      顯示：網格；
      網格模板列：重複（4、100px）；
      網格間隙：15px；
    }

    。卡片 {
      寬度：80px；
      高度：80像素；
      視角：1000px；
    }

    .card-inner {
      位置：相對；
      寬度：100%；
      高度：100%；
      過渡：變換0.6s，box-shadow 0.3s；
      變換風格：保留 3d；
      遊標：指針；
    }

    .card-inner:懸停{
      盒子陰影: 0 4px 20px rgba(255, 255, 255, 0.5);
      變換：縮放（1.1）；
    }

    .card-inner.flipped {
      變換：旋轉Y(180deg)；
    }

    .卡正面，
    .卡背{
      位置：絕對；
      寬度：100%；
      高度：100%；
      背面可見性：隱藏；
      邊框半徑：10px；
    }

    .card-front {
      背景：#444；
      顯示：柔性；
      對齊項目：居中；
      調整內容：居中；
      邊框：2px實線#fff；
      盒子陰影：0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .card-front span {
      字體大小：2rem；
      顏色：#fff；
    }

    .卡背{
      背景：#fff；
      變換：旋轉Y(180deg)；
      顯示：柔性；
      對齊項目：居中；
      調整內容：居中；
      字體大小：3rem；
      字體粗細：粗體；
      邊框半徑：10px；
    }

    .紅心{
      顏色: 紅色;
    }

    .黃心{
      顏色: 金色;
    }

    .橙心{
      顏色: 橙色;
    }

    @關鍵影格發光{
      0% { 盒子陰影: 0 0 10px rgba(255, 255, 255, 0.2); }
      50% { 盒子陰影: 0 0 30px rgba(255, 255, 255, 0.5); }
      100% { 盒子陰影: 0 0 10px rgba(255, 255, 255, 0.2); }
    }
  風格>
頭>



  <h1>卡牌配對遊戲</h1>


  <div>




          </div>

            
        

以上是使用 html css 和 javascript 的卡片配對遊戲在 Instagram 上關注我們：https://www.instagram.com/webstreet_code/的詳細內容。更多資訊請關注PHP中文網其他相關文章！