body {
    margin: 0;
    height: 100vh;
    background: #dcdcdc;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  .oc {
    position: relative;
    width: 600px;
    height: 600px;
  }
  
  /* 头和身体都占满同一个画布 */
  .head,
  .body {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  /* 身体在下面，头在下面 */
  .head {
    z-index: 2;
    animation: headFloat 3s ease-in-out infinite;
  }
  .body {
    z-index: 2;
    animation: bodyFloat 3s ease-in-out infinite;
  }
  

  
  /* 所有图片都完全重叠 */
  .layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    user-select: none;
  }
  
  /* 头部轻微浮动 */
  @keyframes headFloat {
    0% {
      transform: translateY(0px);
    }
  
    50% {
      transform: translateY(-6px);
    }
  
    100% {
      transform: translateY(0px);
    }
  }
  
  /* 身体浮动幅度小一点 */
  @keyframes bodyFloat {
    0% {
      transform: translateY(0px);
    }
  
    50% {
      transform: translateY(-6px);
    }
  
    100% {
      transform: translateY(0px);
    }
  }