过渡案例

先展示效果

实现步骤

1. 在一个正方形(100px)盒子里面放一个宽度是他两倍的长方形(200px)

2. 长方形里面放两张图片

宽高我设置的长方形的一半，这时发现图片被挤到下一行，那是因为有空隙，用浮动解决，当然也可以用增加长方形宽度来解决

3. 过渡的时候最重要的是要写长方形盒子的距离

这样才能产生过度效果，这里是子绝父相，把长方形儿子定位到正方形父亲左边，hover的时候移动第一张图片的距离100px，就把第一张图片移出去，第二张图片移进来了left:0--->left:-100px;**

4. 然后去掉边框，溢出部分隐藏即可

<style>
        .box1{
            position: relative;
            width: 100px;
            height: 100px;
            margin:100px 300px;
            overflow: hidden;
        }
        .box2{
            position:absolute;
            left:0;
            height: 100%;
            width: 200px;
            transition:all .5s;
        }
        .box1:hover .box2{
           position:absolute;
           left:-100px;  
        }
        img{
            /* 去掉图片之间空隙 */
            float: left;
            width: 100px;
            height: 100px; 
        }
        
    </style>