/* 基本的透明度和动画效果 */
.product-card {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

/* 渐入效果 */
.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

/* 从左滑入 */
.slide-in-left {
  animation: slideInLeft 1s ease-in forwards;
}

/* 从右滑入 */
.slide-in-right {
  animation: slideInRight 1s ease-in forwards;
}

/* 从下滑入 */
.slide-in-bottom {
  animation: slideInBottom 1s ease-in forwards;
}

/* keyframes 动画定义 */
/* 渐入 */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 从左滑入 */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 从右滑入 */
@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 从下滑入 */
@keyframes slideInBottom {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.qiang{
  width:100%;
  height: 150px;
}