逛博客看到的一个很好看的图片切换效果，用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实现绚丽的图片切换效果
原文地址：https://www.cnblogs.com/PeriHe/p/8323525.html