2D双开门效果

设置父级背景图片

#实现双开门有两种方法1、采用定位 2、平面转换

#设置父级盒子的样式及背景

   .box {

      display: flex;

      width: 1456px;

      height: 816px;

      margin: 0 auto;

      background-image: url(./img/jhk-1723779336628.jpg);

      overflow: hidden;

    }

#平面转换效果及精灵盒子

.box .left,

    .box .right {

      width: 50%;

      height: 816px;

      background-image: url(./img/jhk-1723779330562.jpg);

      transition: all 2s;

    }

    .box .right {

      background-position: right 0;

    }

    .box:hover .left {

      transform: translate(-100%);

    }

    .box:hover .right {

      transform: translate(100%);

    }

#鼠标滑过图片过度效果