196 lines
4.4 KiB
Plaintext
196 lines
4.4 KiB
Plaintext
/* 让整个页面背景变黑，制造神秘感 */
|
||
page {
|
||
background-color: #1a1a2e; /*以此颜色为底 */
|
||
min-height: 100%; /* 使用 min-height 允许滚动 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
/* 去掉 justify-content: center，防止内容过多时顶部被裁切 */
|
||
min-height: 100%;
|
||
padding: 15px; /* 减小内边距 */
|
||
padding-bottom: 40px; /* 底部预留空间，防止按钮太靠底 */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 标题区域 */
|
||
.title-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 20px; /* 减小间距 */
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.app-title {
|
||
font-size: 24px; /* 减小字号 */
|
||
color: #e94560;
|
||
font-weight: bold;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.app-subtitle {
|
||
display: block;
|
||
font-size: 16px; /* 减小字号 */
|
||
color: #fff;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 还没抽卡时的提示字 */
|
||
.intro {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.instruction {
|
||
display: block;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
margin-bottom: 8px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 卡牌展示出的框框 */
|
||
.card-display {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background-color: #16213e;
|
||
padding: 15px; /* 减小内边距 */
|
||
border-radius: 12px;
|
||
box-shadow: 0 0 15px rgba(233, 69, 96, 0.3);
|
||
margin-bottom: 20px; /* 减小间距 */
|
||
/* width: 90%; 保持这一行，或者在下面的 flip-scene 里控制宽度 */
|
||
}
|
||
|
||
/* --- 翻牌动画核心样式 --- */
|
||
|
||
/* 1. 场景容器：提供 3D 景深 */
|
||
.flip-scene {
|
||
width: 200px; /* 限制宽度，根据具体图片比例调整 */
|
||
height: 333px; /* 假设图片比例 3:5，根据实际显示调整 */
|
||
perspective: 1000px;
|
||
margin-bottom: 20px;
|
||
position: relative; /* 让提示文字可以定位 */
|
||
}
|
||
|
||
/* 2. 翻转实体：包含正反两面，执行旋转 */
|
||
.flip-card {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
transition: transform 0.6s; /* 复位时使用普通过渡 */
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
/* 定义呼吸翻牌关键帧 - 疗愈版 */
|
||
@keyframes breathFlip {
|
||
0% { transform: scale(1) rotateY(0deg); }
|
||
35% { transform: scale(0.97) rotateY(0deg); } /* 缓慢吸气 */
|
||
60% { transform: scale(1.02) rotateY(0deg); } /* 连贯呼气 */
|
||
100% { transform: scale(1) rotateY(180deg); } /* 稳步翻转 */
|
||
}
|
||
|
||
/* 翻转状态：应用动画 */
|
||
.flip-card.flipped {
|
||
/* 延长到 1.8s，使用更舒缓的贝塞尔曲线 */
|
||
animation: breathFlip 1.8s cubic-bezier(0.3, 0.0, 0.4, 1) forwards;
|
||
}
|
||
|
||
/* 3. 正反面公共样式 */
|
||
.card-face {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
backface-visibility: hidden; /* 背面不可见 */
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 12px;
|
||
overflow: hidden; /* 防止图片溢出圆角 */
|
||
}
|
||
|
||
/* 背面（Face Back）：初始正面朝上，旋转 0 度 */
|
||
.face-back {
|
||
background-color: #16213e;
|
||
transform: rotateY(0deg);
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 正面（Face Front）：初始背面朝上，预先旋 180 度 */
|
||
.face-front {
|
||
background-color: #16213e;
|
||
transform: rotateY(180deg);
|
||
}
|
||
|
||
/* 图片填满容器 */
|
||
.card-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block; /* 消除图片底部缝隙 */
|
||
}
|
||
|
||
/* 提示点击的文字 */
|
||
.hint-text {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
background-color: rgba(0,0,0,0.5);
|
||
padding: 5px 10px;
|
||
border-radius: 15px;
|
||
z-index: 3;
|
||
}
|
||
|
||
/* --- 文字信息淡入动画 --- */
|
||
.card-info {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
/* 配合 1.8s 的总时长，延迟到 1.0s 左右开始浮现 */
|
||
transition: opacity 0.8s ease 1.0s, transform 0.8s ease 1.0s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-info.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.card-name {
|
||
color: #e94560;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.card-meaning {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 按钮稍微美化一下 */
|
||
.draw-btn {
|
||
background-color: #0f3460 !important;
|
||
border: 1px solid #e94560 !important;
|
||
color: #fff !important;
|
||
width: 65% !important;
|
||
border-radius: 25px;
|
||
font-size: 16px !important;
|
||
padding: 8px 0 !important;
|
||
}
|
||
|
||
/* 逆位时的图片样式：旋转 180 度 */
|
||
.card-image.reversed {
|
||
transform: rotate(180deg);
|
||
transition: transform 0.5s;
|
||
} |