CSS之双开门案例(CSS double door case)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               width: 1366px;
               height: 600px;
               margin: 0 auto;
               background-image: url(images/bg.jpg);
               overflow: hidden;
           }
           .box::before,
           .box::after{
               float: left;
               content: '';
               width: 50%;
               height: 600px;
               background-image: url(images/fm.jpg);
               transition: all 0.5s;
           }
           .box::after{
               background-position: right 0;
           }
           .box:hover::before{
               transform: translateX(-100%);
           }
           .box:hover::after{
               transform: translateX(100%);
           }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>
————————
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
           *{
               margin: 0;
               padding: 0;
           }
           .box{
               width: 1366px;
               height: 600px;
               margin: 0 auto;
               background-image: url(images/bg.jpg);
               overflow: hidden;
           }
           .box::before,
           .box::after{
               float: left;
               content: '';
               width: 50%;
               height: 600px;
               background-image: url(images/fm.jpg);
               transition: all 0.5s;
           }
           .box::after{
               background-position: right 0;
           }
           .box:hover::before{
               transform: translateX(-100%);
           }
           .box:hover::after{
               transform: translateX(100%);
           }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>