臣向皇上隆重推荐：九宫格翻牌子小程序
陛下吉祥！
夜深宫静，万籁俱寂，正是翻牌子的好时辰。为让陛下体验前所未有的宠幸乐趣，臣特意打造了这款“九宫格翻牌子”小程序，助力圣上选妃如抽盲盒，趣味无穷，仪式感拉满！
产品演示
产品亮点
- 九宫格妃子：九位美妃，个个才貌双全，温婉贤淑，等候圣上临幸。
- 随机翻牌，宠幸谁由天定：一键“随机翻牌”，妃子们屏息以待，谁能得宠，尽在陛下一念之间。
- 宫廷风格，尊贵体验：金色边框、龙纹点缀，尽显皇家气派，翻牌如同御前仪式。
- 趣味弹窗，宠幸有彩蛋：翻牌后弹窗揭晓“今晚宠幸的是哪位妃子”，并附上专属祝福语，陛下可一键“朕知道了”，再来一轮！
- 专宠水印，彰显圣恩：每位妃子背面照片都印有“康熙专宠”，让宠爱昭告后宫。
使用方法
- 打开小程序，九位妃子整齐列阵，正面写有芳名。
- 点击“随机翻牌”，陛下可见九宫格中金光闪闪，妃子们翘首以盼。
- 翻牌动画后，弹窗自动弹出，展示宠幸妃子的美照与趣味祝福。
- 陛下可点击“朕知道了”，继续翻牌，宠爱无上限！
趣味场景
- 独乐乐：夜深人静，陛下独自翻牌，体验“宠幸谁都靠缘分”的刺激。
- 众乐乐：与大臣、妃子同乐，谁被翻中，谁就得表演才艺一段，宫廷气氛瞬间活跃！
臣的寄语
此小程序，既能助陛下选妃解闷，又能增添后宫乐趣。愿陛下夜夜翻牌，夜夜好梦，宠爱有加，龙体安康！
最后；老规矩程序代码放下面了
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>3D九宫格翻牌</title>
<style>
body { background: #f0f0f0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; }
h2 { color: #1769aa; margin: 24px 0 8px 0; }
.grid {
display: grid;
grid-template-columns: repeat(3, 120px);
grid-template-rows: repeat(3, 160px);
gap: 18px;
margin-bottom: 24px;
}
.scene {
width: 120px; height: 160px; perspective: 600px;
}
.card {
width: 120px; height: 160px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(.4,2,.6,1);
cursor: pointer;
}
.card.flipped { transform: rotateY(180deg); }
.card.selected {
box-shadow: 0 0 0 6px #ff9800, 0 0 16px 8px #ffe0b2, 0 8px 32px rgba(0,0,0,0.18);
border-radius: 12px;
transform: scale(1.08) rotateY(0deg) !important;
z-index: 2;
transition: box-shadow 0.2s, transform 0.2s, border-radius 0.2s;
animation: bounce 0.3s;
}
@keyframes bounce {
0% { transform: scale(1.08) translateY(0); }
40% { transform: scale(1.12) translateY(-10px); }
70% { transform: scale(1.05) translateY(2px); }
100% { transform: scale(1.08) translateY(0); }
}
.card-face {
position: absolute; width: 100%; height: 100%;
backface-visibility: hidden; border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.10);
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem; font-family: sans-serif;
}
.front { background: linear-gradient(135deg,#43c6ac,#f8ffae); color: #1769aa; }
.back { background: #fffbe7; color: #e67e22; transform: rotateY(180deg); }
.card-face.back img {
z-index: 1;
}
.card.flipped .card-face.back img {
z-index: 2;
filter: none;
transition: none;
}
@keyframes bigPop {
0% {
transform: translate(-50%,-50%) scale(0.7);
filter: blur(8px) brightness(1.2);
}
100% {
transform: translate(-50%,-50%) scale(1.1);
filter: blur(0) brightness(1);
}
}
#randomBtn {
padding: 10px 32px; font-size: 18px; border: none; border-radius: 8px;
background: linear-gradient(90deg, #43c6ac 60%, #f8ffae 100%);
color: #1769aa; font-weight: 600; cursor: pointer;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.12);
margin-bottom: 10px;
}
#randomBtn:active { background: linear-gradient(90deg, #43a047 60%, #f8ffae 100%); }
</style>
</head>
<body>
<h2 id="mainTitle">请陛下翻牌，今晚宠幸哪位妃子？</h2>
<div class="grid" id="cardGrid"></div>
<button id="randomBtn">随机翻牌</button>
<div id="resultModal" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.65);z-index:10000;align-items:center;justify-content:center;flex-direction:column;">
<div style="background:#fffbe7;padding:32px 40px 24px 40px;border-radius:24px;box-shadow:0 8px 32px rgba(0,0,0,0.18);text-align:center;position:relative;max-width:90vw;">
<img id="modalImg" src="" alt="妃子大图" style="width:320px;max-width:80vw;border-radius:16px;box-shadow:0 4px 16px #eecb8b;margin-bottom:18px;">
<div id="modalName" style="font-size:1.6rem;color:#b8860b;font-weight:bold;margin-bottom:8px;"></div>
<div id="modalDesc" style="font-size:1.1rem;color:#333;margin-bottom:18px;"></div>
<button id="closeModalBtn" style="padding:8px 32px;font-size:1.1rem;border:none;border-radius:8px;background:linear-gradient(90deg,#ffe066,#fbc531);color:#b8860b;font-weight:bold;cursor:pointer;">朕知道了</button>
</div>
</div>
<script>
const grid = document.getElementById('cardGrid');
const cards = [];
const imgList = [
'https://pica.zhimg.com/v2-58bfd43bdf2b71d39507a8bb8c1cfe28_r.jpg',
'https://pic1.zhimg.com/v2-ff48440794ca29d58d35e6f28ad63766_r.jpg',
'https://pic1.zhimg.com/v2-fba456bb85fd62c6b00e1f1ba2fe5467_r.jpg',
'https://picx.zhimg.com/v2-81ab73e99dfa21e8fcd20a2b912805de_r.jpg',
'https://picx.zhimg.com/v2-a39d6dd4910ff0fcc5b5f7f7f173448c_r.jpg',
'https://picx.zhimg.com/v2-4af49b991eba0a0ff807630bb5bb6275_r.jpg',
'https://picx.zhimg.com/v2-12f3ccc91a9ae4b8bee6bfcac96c0051_r.jpg',
'https://pica.zhimg.com/v2-85d8d11c5cd86d8c30fb7267f255fe3e_r.jpg',
'https://picx.zhimg.com/v2-f42c1d8024de4ffbca21871779cac20b_r.jpg'
];
const frontColors = [
'linear-gradient(135deg,#a8edea,#fed6e3)',
'linear-gradient(135deg,#fbc2eb,#a6c1ee)',
'linear-gradient(135deg,#fceabb,#f8b500)',
'linear-gradient(135deg,#d4fc79,#96e6a1)',
'linear-gradient(135deg,#fff1eb,#ace0f9)',
'linear-gradient(135deg,#f9f586,#ffecd2)',
'linear-gradient(135deg,#f6d365,#fda085)',
'linear-gradient(135deg,#fbc2eb,#f7ff00)',
'linear-gradient(135deg,#c2ffd8,#465efb)'
];
const borderColors = [
'#7ed6df', // 浅蓝
'#b2a4ff', // 淡紫
'#ffe066', // 柠檬黄
'#a3f7bf', // 浅绿
'#ace0f9', // 天蓝
'#fff6a9', // 米黄
'#ffd6a5', // 橙粉
'#f7ff00', // 亮黄
'#c2ffd8' // 薄荷绿
];
const feiziNames = [
'慧妃', '婉妃', '静妃', '玉妃', '兰妃', '雅妃', '珍妃', '雪妃', '芸妃'
];
const feiziDescs = [
'温婉贤淑，深得圣心。',
'聪慧灵巧，才貌双全。',
'端庄大方，母仪天下。',
'玉洁冰清，气质高雅。',
'兰心蕙质，温柔体贴。',
'风姿绰约，仪态万千。',
'明眸善睐，巧笑倩兮。',
'冰雪聪明，楚楚动人。',
'才情出众，仪容绝美。'
];
// 生成卡片，正面显示妃子名，背面为妃子照片
grid.innerHTML = '';
cards.length = 0;
for(let i=0;i<9;i++) {
const scene = document.createElement('div');
scene.className = 'scene';
const card = document.createElement('div');
card.className = 'card';
card.dataset.idx = i;
card.innerHTML = `<div class="card-face front" style="background:${frontColors[i]};color:#b8860b;border:2px solid gold;font-weight:bold;font-size:1.3rem;letter-spacing:2px;box-shadow:0 0 8px #eecb8b;">${feiziNames[i]}</div><div class="card-face back"><div style='position:relative;width:100%;height:100%;'><img src="${imgList[i]}" alt="妃子" style="width:100%;height:100%;object-fit:cover;border-radius:12px;background:#fff;"><span style='position:absolute;right:8px;bottom:8px;font-size:0.9rem;color:#fff;background:rgba(184,134,11,0.7);padding:2px 8px;border-radius:8px;'>康熙专宠</span></div></div>`;
scene.appendChild(card);
grid.appendChild(scene);
cards.push(card);
}
let animating = false;
function setSelected(idx) {
cards.forEach((c, i) => {
c.classList.remove('selected');
c.style.boxShadow = '';
});
const card = cards[idx];
card.classList.add('selected');
card.style.boxShadow = `0 0 0 6px ${borderColors[idx]}, 0 0 16px 8px ${borderColors[idx]}55, 0 8px 32px rgba(0,0,0,0.18)`;
}
// 翻牌后弹窗逻辑
const resultModal = document.getElementById('resultModal');
const modalImg = document.getElementById('modalImg');
const modalName = document.getElementById('modalName');
const modalDesc = document.getElementById('modalDesc');
const closeModalBtn = document.getElementById('closeModalBtn');
closeModalBtn.onclick = () => { resultModal.style.display = 'none'; };
// 修改翻牌逻辑，翻开后弹窗显示妃子信息
document.getElementById('randomBtn').onclick = async function() {
if(animating) return;
animating = true;
cards.forEach(c=>{c.classList.remove('flipped','selected');c.style.boxShadow='';});
let lastIdx = 0;
let used = new Set();
const jumpTimes = 9 + Math.floor(Math.random()*6);
for(let i=0;i<jumpTimes;i++) {
let available = cards.map((_, idx) => idx).filter(idx => !used.has(idx));
if(available.length === 0) {
used.clear();
available = cards.map((_, idx) => idx);
}
const idx = available[Math.floor(Math.random()*available.length)];
setSelected(idx);
used.add(idx);
lastIdx = idx;
await new Promise(r=>setTimeout(r, 90 + i*10));
}
cards[lastIdx].classList.remove('selected');
cards[lastIdx].style.boxShadow = '';
setTimeout(() => {
cards[lastIdx].classList.add('flipped');
// 弹窗展示妃子信息
modalImg.src = imgList[lastIdx];
modalName.textContent = feiziNames[lastIdx];
modalDesc.textContent = `今晚宠幸的是：${feiziNames[lastIdx]}，${feiziDescs[lastIdx]}`;
resultModal.style.display = 'flex';
}, 300);
animating = false;
};
</script>
</body>
</html>
