<div class="box">

</div>

* {

    margin: 0;

    padding: 0;

}

​

.box {

    width: 800px;

    height: 300px;

    margin: 0 auto;

    // background: url("./images/bg.jpg");

    background: red;

    overflow: hidden;

}

​

/* 1. 左右相同的样式 */

.box::before,

.box::after {

    float: left;

    content: "";

    width: 50%;

    height: 600px;

    background-color: blue;

    // background-image: url(./images/fm.jpg);

    transition: all 0.5s;

}

/* 2. 左右的背景图不一样 */

.box::after {

    background-position: right 0;

}

​

/* 3. hover 效果 */

/* 用户鼠标移入box, 控制子级after before移动 */

.box:hover::before {

    transform: translateX(-100%);

}

​

.box:hover::after {

    transform: translate(100%);

}

​