client-app/components/tabbar/style.scss

.hc-tabbar-box {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background: white;
  z-index: 8090;
  padding: 28rpx 28rpx calc(var(--window-bottom) + 34rpx);
  box-shadow: 0 -12rpx 10rpx -12rpx rgba(215, 224, 253, 100);
  .hc-tabbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    .item {
      position: relative;
      font-size: 26rpx;
      color: #8E8E93;
      height: 82rpx;
      width: 150rpx;
      .icon-box {
        position: relative;
        .icon {
          position: relative;
          display: flex;
          font-size: 42rpx;
          align-items: center;
          justify-content: center;
          text {
            transform-origin: 24rpx 24rpx;
            animation-duration: 1s;
            animation-iteration-count: 1;
            animation-fill-mode: backwards;
          }
          text[class^="i-ooui-"] {
            font-size: 36rpx;
          }
        }
      }
      .name {
        position: absolute;
        text-align: center;
        bottom: 0;
        width: 100%;
        z-index: 2;
      }
      &.cur {
        .icon-box {
          height: 150rpx;
          width: 150rpx;
          position: absolute;
          top: -86rpx;
          background: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 -12rpx 10rpx -12rpx rgba(165, 187, 255, 100);
          .icon {
            background: #554D84;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            color: white;
            display: inline-flex;
            font-size: 48rpx;
            text {
              animation-name: tabbarIcon;
            }
            text[class^="i-ooui-"] {
              font-size: 40rpx;
            }
          }
        }
        .name {
          color: #554D84;
        }
      }
    }
  }
}

@keyframes tabbarIcon {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}