CSS3实现绚丽的图片切换效果

　　逛博客看到的一个很好看的图片切换效果，用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);
}

原文地址：https://www.cnblogs.com/PeriHe/p/8323525.html