利用css和伪元素做一个开门效果。

首先先创建好一个空盒子。

 <div class="box">
  
  </div>

样式：

.box{
      width: 1366px;
      height: 600px;
      margin: 0 auto;
      background-color: antiquewhite;
      background: url(./img/bg.jpg);
      overflow: hidden;
    }

    .box::before,.box::after{
      content: '';
      float: left;
      width: 50%;
      height: 100%;
      background:url('./img/fm.jpg');
      transition: 0.3s;
    }

    .box::after{
      background-position: right;
    }

    .box:hover::before{
      transform: translateX(-100%);
    }

    .box:hover::after{
      transform: translateX(100%);
    }

最终效果：