add u

pages/index/index.wxss

@@ -14,6 +14,15 @@
   z-index: -1;
 }
 
+/* 遮罩层 - 隐藏不显示 */
+.mask {
+  display: none;
+}
+
+.mask-show {
+  display: none;
+}
+
 .content {
   position: relative;
   z-index: 1;
@@ -30,46 +39,214 @@
   font-weight: bold;
 }
 
-.xz_bg{
+.xz_bg {
   width: 100%;
   height: 100%;
-  display: flex;
-  justify-content: space-between; /* 项目之间有相等间距，两端贴边 */
-  padding-top: 100rpx;
+  position: relative;
 }
-.xz_xiannv{
-  width: 400rpx;
-  height: 400rpx;
-  opacity: 95%;
 
+/* 星座包装器 */
+.constellation-wrapper {
+  position: absolute;
+  z-index: 2;
+  transition: opacity 0.6s ease;
 }
-.xz_lion{
-  width: 400rpx;
-  height: 400rpx;
+
+/* 当有激活星座时，其他星座稍微变暗 */
+.constellation-wrapper.dimmed {
+  opacity: 0.5;
+}
+
+/* 星座图片通用样式 */
+.xz_xiannv,
+.xz_lion,
+.xz_juxie,
+.xz_sheshou,
+.xz_shuangyu {
+  width: 280rpx;
+  height: 280rpx;
+  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  cursor: pointer;
+  display: block;
+  transform-origin: center center;
+  will-change: transform, opacity, filter;
+  /* 去除边框和轮廓 */
+  border: none;
+  outline: none;
+  box-shadow: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 悬停效果（移动端用active代替） */
+.xz_xiannv:active:not(.active-center),
+.xz_lion:active:not(.active-center),
+.xz_juxie:active:not(.active-center),
+.xz_sheshou:active:not(.active-center),
+.xz_shuangyu:active:not(.active-center) {
+  transform: scale(0.95);
+  transition: all 0.1s ease;
+}
+
+/* 仙女座 - 左上角 */
+.xz_xiannv {
   opacity: 95%;
-  position: absolute;
-  top: 220rpx;   
-  left: 320rpx;
+  position: relative;
 }
-.xz_juxie{
-  width: 400rpx;
-  height: 400rpx;
+
+.constellation-wrapper:nth-child(1) {
+  top: 120rpx;
+  left: 40rpx;
+}
+
+/* 狮子座 - 右上角 */
+.xz_lion {
   opacity: 95%;
-  position: absolute;
-  top: 500rpx;
+  position: relative;
 }
-.xz_sheshou{
-  width: 400rpx;
-  height: 400rpx;
+
+.constellation-wrapper:nth-child(2) {
+  top: 120rpx;
+  right: 40rpx;
+}
+
+/* 巨蟹座 - 左中部 */
+.xz_juxie {
   opacity: 95%;
-  position: absolute;
-  top: 700rpx;
-  left: 320rpx;
+  position: relative;
 }
-.xz_shuangyu{
-  width: 400rpx;
-  height: 400rpx;
-  opacity: 70%;
+
+.constellation-wrapper:nth-child(3) {
+  top: 360rpx;
+  left: 60rpx;
+}
+
+/* 射手座 - 右中部 */
+.xz_sheshou {
+  opacity: 95%;
+  position: relative;
+}
+
+.constellation-wrapper:nth-child(4) {
+  top: 360rpx;
+  right: 60rpx;
+}
+
+/* 双鱼座 - 底部居中 */
+.xz_shuangyu {
+  opacity: 85%;
+  position: relative;
+}
+
+.constellation-wrapper:nth-child(5) {
+  bottom: 180rpx;
+  left: 50%;
+  margin-left: -140rpx;
+}
+
+/* 激活状态 - 放大并居中 */
+.active-center {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  width: 280rpx !important;
+  height: 280rpx !important;
+  margin: 0 !important;
+  opacity: 1 !important;
+  z-index: 100 !important;
+  pointer-events: auto !important;
+  /* 平移放大动画 + 后续脉冲动画 */
+  animation: zoomIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
+             smoothPulse 2s ease-in-out 0.6s infinite,
+             glow 2s ease-in-out 0.6s infinite;
+}
+
+/* 标题文字 */
+.constellation-title {
+  position: fixed;
+  top: 65%;
+  left: 50%;
+  transform: translateX(-50%) translateY(20rpx);
+  font-size: 72rpx;
+  font-weight: bold;
+  color: #ffffff;
+  opacity: 0;
+  z-index: 101;
+  pointer-events: none;
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s;
+  text-shadow: 0 0 20rpx rgba(74, 111, 165, 1),
+               0 0 40rpx rgba(74, 111, 165, 0.8),
+               0 4rpx 8rpx rgba(0, 0, 0, 0.5);
+  letter-spacing: 16rpx;
+  white-space: nowrap;
+}
+
+.title-show {
+  opacity: 1;
+  top: 63%;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* 平滑的脉冲效果 */
+@keyframes smoothPulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1.8);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.85);
+  }
+}
+
+/* 发光动画 */
+@keyframes glow {
+  0%, 100% {
+    filter: brightness(1.3) drop-shadow(0 0 60rpx rgba(74, 111, 165, 1)) 
+            drop-shadow(0 0 100rpx rgba(74, 111, 165, 0.6));
+  }
+  50% {
+    filter: brightness(1.4) drop-shadow(0 0 80rpx rgba(74, 111, 165, 1)) 
+            drop-shadow(0 0 120rpx rgba(74, 111, 165, 0.8));
+  }
+}
+
+/* 星座包装器的过渡效果 */
+.constellation-wrapper {
+  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* 平移放大入场动画（无旋转） */
+@keyframes zoomIn {
+  0% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1.8);
+    opacity: 1;
+  }
+}
+
+/* 星云粒子效果（伪元素） */
+.active-center::before {
+  content: '';
   position: absolute;
-  top: 900rpx;
+  top: 50%;
+  left: 50%;
+  width: 120%;
+  height: 120%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, rgba(74, 111, 165, 0.3) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: nebula 3s ease-in-out infinite;
+  z-index: -1;
+}
+
+@keyframes nebula {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.2);
+    opacity: 0.8;
+  }
 }