首页 >web前端 >js教程 >使用 html css 和 javascript 的卡片匹配游戏在 Instagram 上关注我们：https://www.instagram.com/webstreet_code/

使用 html css 和 javascript 的卡片匹配游戏在 Instagram 上关注我们：https://www.instagram.com/webstreet_code/

Linda Hamilton原创: 2024-11-26 03:00:10705浏览

Cards matching game using html css and javascript follow us on instagram: https://www.instagram.com/webstreet_code/

在 Instagram 上关注我们：https://www.instagram.com/webstreet_code/

<html lang="zh-cn">
<头>
  
  
  <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中文网其他相关文章！

JavaScript css html using pointer display position margin border viewport background transform transition animation column flex https

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How Can I Extend JavaScript Arrays Without Creating a New Array?下一篇：How to Update a Single Item in a Nested Array Field in Firestore?

查看更多