* {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.container {
  display: grid;
  align-content: center;
  justify-content: center;
  margin: auto;
  width: 100%;
  height: 200vh;
  position: relative;
  background-color: black;
}
/* <!-- /////////////////////////////////////////////////
      ////////////////////////test-1///////////////////
      //////////////////////////////////////////////// --> */
/* .box-1 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(img/2.png);

  background-size: cover;
  top: 0;
  left: 0;
  position: absolute;
}
.box-2 {
  background-image: url(img/1.png);
  background-size: cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  transition: all 0.1s; */
/* test 1-2 */
/* mask-image: url(img/jianbian.png);
  mask-repeat: no-repeat;
  mask-size: 25vh;
  mask-mode: luminance;
  mask-position: 50% 50%; */

/* <!-- /////////////////////////////////////////////////
      ////////////////////////test-2///////////////////
      //////////////////////////////////////////////// --> */
.box-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.box-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.box-1 {
  background-image: url(img/9.png);
  background-size: cover;
}
.box-2 {
  background-image: url(img/8.png);
  background-size: cover;
  clip-path: inset(100% 0 0 0);
}