CSS 利用偏移transform实现双开门效果：运用浮动、图形转换、鼠标悬停的知识点对图片进行平移，实现两张图片的双开门效果！

1. 定义一个盒子，存放开门效果后里面的图片

代码：

html：

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

css：

.box {
            width: 1366px;
            height: 600px;
            /* 添加背景图片，开门后看到 */
            background: url(./images/bg.jpg);
            margin: 50px auto;
            /* 添加边框，可有可无 */
            border: 5px solid pink;
            /* 溢出隐藏 */
            overflow: hidden;
        }

效果：

2. 添加两扇门

伪元素法分别添加到图片的左右两边，并且大小一致
利用浮动并列
添上背景图片，调整好位置

代码：

         /* 伪元素法 */
        .box::before,
        .box::after {
            content: '';
            float: left;
            /* 一门一半 */
            width: 50%;
            height: 100%;
            /* 给门画上图案 左对齐*/
            background: pink url(./images/fm.jpg) left;
            /* 过渡时间 */
            transition: 1s;
        }

        .box::after {
            /* 背景图片右对齐 */
            background: url(./images/fm.jpg) right;
        }

        /* 鼠标悬停 */
        .box:hover::before {
            /* 向左偏移自身的一倍 */
            transform: translate(-100%);
        }

        .box:hover::after {
            /* 向右偏移自身的一倍 */
            transform: translate(100%);
        }

鼠标悬停

悬停到盒子box
两门分别向两侧移动
移动时间为1s

代码：

        /* 鼠标悬停 */
        .box:hover::before {
            /* 向左偏移自身的一倍 */
            transform: translate(-100%);
        }

        .box:hover::after {
            /* 向右偏移自身的一倍 */
            transform: translate(100%);
        }

效果：

插入门后：

鼠标悬停box：

注意：

在大盒子需要设置溢出隐藏 overflow: hidden;
设置过渡时间 transition: 1s;
网页居中效果，在box添加 margin: 50px auto;