魔法阵九宫格游戏
我将设计一个具有极致美学魔法阵主题的九宫格游戏，包含丰富的动画效果和炫酷的视觉效果。
设计思路
- 创建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}}
魔法阵九宫格
使用小键盘数字键控制：
789对应第一行，456对应第二行，123对应第三行
按“.”或“+”可随机重置游戏状态
按“Enter”或“*”可显示/隐藏此提示信息
按“/”可切换暗色模式
按“Backspace”可撤销上一步操作（最多十步）
(注意：需开启NumLock)
