逛博客看到的一個很好看的圖片切換效果，用CSS3做的，自己也嘗試了一下。想法很巧妙，實現起來並不困難。將一個圖片分為了四個部分，通過絕對定位的方式使每個li中顯示圖片的一個部分，從而拼成一個完整的圖片。再對四個部分進行動畫處理讓第二個圖片顯現出來，第二個圖片也是使用transform屬性來先放大再還原的處理。

效果預覽

附代碼段：

<div class="grid-box">
    <ul class="pic1">
        <li>
            <img src="image/a.jpg">
        </
 
li>
        <li>
            <img src="image/a.jpg">
        </li>
        <li>
            <img src="image/a.jpg">
        </li>
        <li>
            <img src="image/a.jpg">
        </li>
    </ul>
    <span class="pic2"></span>
 

</div>

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
ul{
    list-style: none;
}
.grid-box{
    width: 280px;
    height: 220px;
    overflow: hidden;
    border: 10px solid gray;
    border-radius: 10px;
    margin: 20px auto;
    position: relative;
}
.pic1, .pic2{
    width: 260px
 
;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
}
.pic1 li{
    width: 50%;
    height: 50%;
    overflow: hidden;
    float: left;
    position: relative;
}
/*pic1 拼接圖片*/
.pic1 li img{
    position: absolute;
    width: 260px;
    height: 200px;
}
.grid-box:hover .pic2, .pic2, .pic1 img{
    transition: all .7s ease;
}
.pic1 li:nth-of-type(1) img{
    left: 0;
    top: 0;
}
.pic1 li:nth-of-type(2) img{
    left: -130px;
}
.pic1 li:nth-of-type(3) img{
    left: 0;
    top: -100px;
}
.pic1 li:nth-of-type(4) img{
    left: -130px;
    top: -100px;
}
/*pic1 滑動圖片*/
.pic1:hover li:nth-of-type(1) img{
    /*向下滑*/
    top: 100px;
}
.pic1:hover li:nth-of-type(2) img{
    /*向左滑*/
    left: -260px;
}
.pic1:hover li:nth-of-type(3) img{
    /*向右滑*/
    left: 130px;
}
.pic1:hover li:nth-of-type(4) img{
    /*向上滑*/
    top: -200px;
}
/*pic2的放大處理*/
.pic2{
    transform: scale(1.5);
    background: url("image/b.jpg");
    background-size: cover;
    z-index: -1;
}
.grid-box:hover .pic2{
    transform: scale(1);
}

CSS3實現絢麗的圖片切換效果