/* styles.css */
body, html {
  margin: 0;
  height: 100%;
  overflow: hidden; /* 防止背景图滚动 */
}

.background-container {
  position: relative;
  height: 100%;
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: fade 15s infinite linear; /* 动画持续时间和无限次数 */
  animation-delay: 0s; /* 默认延迟 */
}

/* 第一个背景图没有延迟 */
.background-image:first-child {
  /* ... 其他样式 ... */
}

/* 后续背景图的延迟是第一个背景图动画持续时间的整数倍 */
.background-image:nth-child(2) {
  animation-delay: 15s; /* 第二个背景图延迟15秒 */
}

.background-image:nth-child(3) {
  animation-delay: 30s; /* 第三个背景图延迟30秒 */
}

/* 以此类推 */