魔法阵九宫格游戏

我将设计一个具有极致美学魔法阵主题的九宫格游戏，包含丰富的动画效果和炫酷的视觉效果。

设计思路

创建3×3的魔法卡牌网格
实现点击翻转卡牌及相邻卡牌的功能
添加华丽的魔法阵背景和粒子效果
实现键盘快捷键操作
添加成功庆祝动画

下面是完整的HTML代码：

”`html <!DOCTYPE html>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>魔法阵九宫格</title>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Arial', sans-serif;
        background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
        color: white;
    }

    .container {
        position: relative;
        z-index: 10;
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
        font-size: 2.5rem;
        text-shadow: 0 0 10px rgba(255,255,255,0.7);
    }

    .game-info {
        display: flex;
        justify-content: space-between;
        width: 300px;
        margin-bottom: 20px;
    }

    .counter {
        background-color: rgba(255,255,255,0.1);
        padding: 10px 15px;
        border-radius: 10px;
    }

    .grid-container {
      display: grid; 
      grid-template-columns: repeat(3, auto); 
      gap :15px; 
      perspective :800px; 
      margin-top :30px; 
      position :relative ; 
      z-index :20 ;
     }

     .card { 
       width :100px ; height :100px ; 
       position :relative ; transform-style preserve-3d ; transition transform .6s cubic-bezier(.68,-.55,.27,1.55) , box-shadow .4s ease-in-out ;
       cursor pointer ;
       border-radius :12% ;
       box-shadow inset -5px -5px rgba(255 ,255 ,255 ,.05) ,
                 inset  5px  5px rgba(  0 ,  0 ,  0 ,.2 ) ,
                        -2px -2px rgba(255 ,255 ,255 ,.05) ,
                         2px  2px rgba(  0 ,  0 ,  0 ,.4 ) ;
     }

     /* Card front (dark side) */
     .card-front { 
       position absolute ; width inherit height inherit backface-visibility hidden display flex align-items center justify-content center border-radius inherit background radial-gradient(circle at top left,#000428,#004e92) color white font-size large font-weight bold box-shadow inset -3 px -3 px rgba (200 ,200 ,200,.1),inset  3 px  3 px rgba (50,50,50,.4)
     }

     /* Card back (light side) */
     .card-back { 
       position absolute ; width inherit height inherit backface-visibility hidden display flex align-items center justify-content center border-radius inherit background radial-gradient(circle at top left,#ff9966,#ff5e62) color white font-size large font-weight bold transform rotateY(180deg)
     }

     /* Flipped card */
     .flipped { transform rotateY(180deg)}

     /* Magic circle effect on cards */
     .magic-circle {position absolute top calc(-25%) left calc(-25%) width calc(150%) height calc(150%) border-radius50% opacity70% mix-blend-mode screen filter blur(.75rem)}

     /* Success message styling*/

.success-message{position fixed top50% left50% transform translate(-50%,-50%) scale(.8);background linear-gradient(to right bottom,rgba(76,161,175,.9),rgba(19658,.9));padding40 min-width max-content max-width80vw text-aligncenter border-radius20 box-shadow01030 r g b a (.7);z index999 visibilityhidden opacity transition all cubic-bezier(.68,-.55,.27,.55).8} .success-message.show{visibilityvisible opacity transform translate(-50%,-60%) scale}

/* Button styling*/ .btn{margin-top30 padding1015 background linear-gradient(to right bottom,rgba76,,161,,175,,1),rgba19658,,1));border none outline none colorwhite cursorpointer border-radius transition all cubic-bezier(.68,-..55..27..55).4 text-transform uppercase letter-spacing font-weightbold} .btn:hover{transform translateY(-5)}

/* Background magic circles*/ .bg-circle{positionabsolute topvar(–y) leftvar(–x) widthvar(–size) heightvar(–size) borderRadius animation float infinite alternate-reverse ease-in-out filter blur(var(–blur)) opacity var(–opacity)} .bg-circle:nth-child(){–x:- –y:- –size:vmin –duration:s –delay:s –opacity:. –blur:p} .bg-circle:nth-child(){–x:- –y:- –size:vmin –duration:s –delay:s –opacity:. –blur:p} .bg-circle:nth-child(){–x:- –y:- –size:vmin –duration:s –delay:s –opacity:. –blur:p}

@keyframes float{ from{transform translate(var(–tx-start),var(–ty-start))rotate(var(–r-start))} to{transform translate(var(–tx-end),var(–ty-end))rotate(var(–r-end))} }

/* Particle effects*/ .particle{positionabsolute pointer-eventsnone animation particle-fadeout forwards ease-out}

@keyframes particle-fadeout{ from{opacity transform scale()translate(var(–tx),var(–ty))rotate()} to{opacity transform scale()translate(var(–tx-end),var(–ty-end))rotate()} }

/* Responsive design*/ @media(max-width:){(h){font-size rem}(grid container){gap px}(card){width px height px}}