@keyframes shubiao {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}



/* 基础动画框架：所有图形通用 */
.grap_item {transform-origin: center; /* 强制围绕中心点运动 */will-change: transform; /* 性能优化 */}


/* 1. 折线图形：Z 轴旋转 + 上下位移 */
.grap_item[data-effect="float"]{
  animation: floatZ 10s infinite ease-in-out;
}
@keyframes floatZ {
  0% { transform: rotateZ(0deg) translateY(0); }
  25% { transform: rotateZ(5deg) translateY(-5px); }
  50% { transform: rotateZ(0deg) translateY(0); }
  75% { transform: rotateZ(-5deg) translateY(5px); }
  100% { transform: rotateZ(0deg) translateY(0); }
}

/* 2. 扇形图形：X 轴旋转 + 前后位移（模拟 3D 翻转） */
.grap_item[data-effect="rotate"] {
  transform-origin: top;
  animation: floatX 10s infinite ease-in-out;
}
@keyframes floatX {
  0% { transform: rotate(0deg) translateZ(0); }
  25% { transform: rotate(12deg) translateZ(8px); }
  50% { transform: rotate(0deg) translateZ(0); }
  75% { transform: rotate(-12deg) translateZ(-8px); }
  100% { transform: rotate(0deg) translateZ(0); }
}

/* 3. 环形图形：Y 轴旋转 + 左右位移 */
.grap_item[data-effect="circle"] {
  animation: floatY 10s infinite ease-in-out;
}
@keyframes floatY {
  0% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(18deg) }
  50% { transform: rotate(0deg) translateX(0); }
  75% { transform: rotate(-18deg) }
  100% { transform: rotate(0deg) translateX(0); }
}

/* 4. C 形图形：Z 轴旋转 + 对角线位移（更灵动） */
.grap_item[data-effect="tilt"] {
  animation: floatDiag 10s infinite ease-in-out;
}
@keyframes floatDiag {
  0% { transform: rotateZ(0deg) translate(0, 0); }
  25% { transform: rotateZ(16deg) translate(8px, -8px); }
  50% { transform: rotateZ(0deg) translate(0, 0); }
  75% { transform: rotateZ(-16deg) translate(-8px, 8px); }
  100% { transform: rotateZ(0deg) translate(0, 0); }
}

/* 5. 半管图形：3D 旋转（X+Y 轴） + 小幅位移 */
.grap_item[data-effect="glide"]  {
  animation: float3d 10s infinite ease-in-out;
}
@keyframes float3d {
  0% { transform: rotate(0) translate(0, 0); }
  25% { transform: rotate(12deg) translate(5px, -5px); }
  50% { transform: rotate(0deg) translate(0, 0); }
  75% { transform: rotate(-12deg) translate(-5px, 5px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

/* 6. 圆锥图形：X 轴旋转 + 上下位移（强化 3D 感） */
.grap_item[data-effect="fade"] {
  animation: floatCone 10s infinite ease-in-out;
}
@keyframes floatCone {
  0% { transform: rotateX(0deg) translateY(0); }
  25% { transform: rotateX(14deg) translateY(-12px); }
  50% { transform: rotateX(0deg) translateY(0); }
  75% { transform: rotateX(-14deg) translateY(12px); }
  100% { transform: rotateX(0deg) translateY(0); }
}

/* 随机相位差：避免所有图形同步运动 */
.grap_item:nth-child(1) { animation-delay: 0s; }
.grap_item:nth-child(2) { animation-delay: -1.5s; }
.grap_item:nth-child(3) { animation-delay: -3s; }
.grap_item:nth-child(4) { animation-delay: -4.5s; }
.grap_item:nth-child(5) { animation-delay: -6s; }
.grap_item:nth-child(6) { animation-delay: -7.5s; }