@keyframes show {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes hide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.wrap {
  width: 100%;
  height: 350px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 20px;
}
.wrap .box {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: white;
}
.show {
  animation: show .8s;
}
.hide {
  animation: hide .8s;
  transform: translateX(100%);
}

/* 移动端样式 */
@media only screen and (max-width: 768px) {
    .wrap {
        height: 220px;
    }
}