ion-tab-bar {
    background-image: white;
    background-color: #f8f8f8;
    background-size: cover;
    background-repeat: no-repeat;
    border: 0;
    height: 8%;
    box-shadow:black;
  
    ion-tab-button {
      background-color: hsla(0, 0, 0, 0);

      img{
        width: 40px;
        height: 40px;
      }
  
      ion-label {
        color: white;
        font-size: 15px;
        -webkit-text-stroke: 0.5px black;
  
        @font-face {
          font-family: "footer-font";
          src: url("style-img/footer-font.otf");
        }
  
        font-family: "footer-font";
        font-weight: 1000;
      }
    }
  }

  /* CSS 动画定义 */
@keyframes bounceAndScale {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.1);
  }
}

img {
  transition: transform 0.3s ease; /* 添加平滑过渡 */
}

/* 在动画时应用的类 */
.animate {
  animation: bounceAndScale 0.6s ease forwards; /* 使用定义的动画 */
}