母亲节祝福的网页
原创
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>母亲节快乐</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root{
--size:220px; /* 立方体边长 */
--wall:4px; /* 壁厚 (边框宽度) */
}
/* ───────── 场景 ───────── */
.scene{perspective:800px;width:var(--size);height:var(--size);margin:0 auto;cursor:grab;position:relative;}
.scene:active{cursor:grabbing;}
/* ───────── 立方体 ───────── */
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .3s ease;}
/* 外壁公共样式 */
.face{
position:absolute;width:100%;height:100%;
background:#f9a0c6;border:var(--wall) solid #f78db8;
display:flex;align-items:center;justify-content:center;
}
/* 6 面排布 */
.face-front {transform:translateZ(calc(var(--size)/2));}
.face-back {transform:rotateY(180deg) translateZ(calc(var(--size)/2));}
.face-right {transform:rotateY(90deg) translateZ(calc(var(--size)/2));}
.face-left {transform:rotateY(-90deg) translateZ(calc(var(--size)/2));}
.face-bottom{transform:rotateX(-90deg) translateZ(calc(var(--size)/2));}
/* 顶盖：初始紧贴，打开时后翻 */
.face-top{
transform:rotateX(90deg) translateZ(calc(var(--size)/2));
background:#f78db8;
transition:transform .4s ease;
}
.open .face-top{transform:rotateX(-95deg) translateZ(calc(var(--size)/2));}
/* 内部水平面：放贺卡 */
.face-inner{
background:transparent;border:none;pointer-events:none;
transform:rotateX(90deg) translateZ(0);
}
/* 心形图案 */
.heart::before{content:"❤";font-size:48px;color:#fff;}
/* ───── 贺卡 ───── */
.card{
width:140px;height:90px;background:#fff;border:2px solid #f9a0c6;border-radius:6px;
box-shadow:0 4px 6px rgb(0 0 0 / .25);cursor:pointer;overflow:hidden;
transform:scale(0);transition:transform .4s;
pointer-events:none;
}
.open .card{transform:scale(1);pointer-events:auto;}
.card-inner{padding:8px;font-size:14px;color:#333;text-align:center;}
/* ───── 放大查看层 ───── */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgb(0 0 0 / .4);z-index:50;}
.overlay.show{display:flex;}
.overlay .card{width:280px;height:180px;transform:scale(1);}
/* ──────贺卡的css────── */
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center bg-pink-50 select-none text-gray-800">
<!-- 3D 场景 -->
<div id="scene" class="scene">
<div id="cube" class="cube">
<div class="face face-front heart"></div>
<div class="face face-back"></div>
<div class="face face-right"></div>
<div class="face face-left"></div>
<div class="face face-top"></div>
<div class="face face-bottom"></div>
<!-- 水平面 + 贺卡 -->
<div class="face face-inner">
<div id="card" class="card">
<div class="card-inner flex items-center justify-center h-full">给妈妈的信</div>
</div>
</div>
</div>
</div>
<!-- 放大贺卡层 -->
<div id="overlay" class="overlay">
<div class="card">
<div class="card-inner leading-relaxed">
亲爱的妈妈：<br/>
感谢您无私的爱与付出，<br/>
您的双手撑起了我的世界。<br/>
愿您永远健康、快乐、幸福！<br/>
—— 爱您的孩子
</div>
</div>
</div>
<script>
const cube=document.getElementById('cube');
const scene=document.getElementById('scene');
const card=document.getElementById('card');
const overlay=document.getElementById('overlay');
let dragging=false,sx,sy,rx=-20,ry=-30,move=false,th=5;
const setRot=()=>cube.style.transform=`rotateX(${rx}deg) rotateY(${ry}deg)`;//旋转礼盒
setRot();
scene.addEventListener('pointerdown',e=>{//鼠标按下时执行的操作
dragging=true;
move=false;
sx=e.clientX;//记录之前的坐标
sy=e.clientY;//记录之前的坐标
});
window.addEventListener('pointermove',e=>{//鼠标移动时执行的操作
if(!dragging)return;
const dx=e.clientX-sx,dy=e.clientY-sy;
if(Math.abs(dx)>th||Math.abs(dy)>th) move=true;
ry+=dx*0.4;
rx-=dy*0.4;
sx=e.clientX;
sy=e.clientY;
setRot();
});
window.addEventListener('pointerup',()=>{//鼠标抬起时执行的操作
if(!dragging)return;
dragging=false;
if(!move) cube.classList.toggle('open');
});
/* 贺卡放大与关闭 */
card.addEventListener('click',e=>{e.stopPropagation();overlay.classList.add('show');});
overlay.addEventListener('click',()=>overlay.classList.remove('show'));
</script>
</body>
</html>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
