huaanglimeng/pages/index/index.wxss

/* 让整个页面背景变黑，制造神秘感 */
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;
}

/* 星座入口样式 */
.horoscope-entry {
  margin-top: 20px;
  padding: 10px;
  opacity: 0.9;
}

.horoscope-entry text {
  color: #a29bfe; /* 浅紫色，以此区分 */
  font-size: 14px;
  text-decoration: underline; /*以此暗示可点击*/
  cursor: pointer;
}

/* 按钮稍微美化一下 */
.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; 
}