各位网友大家好，我是陌上花会开，人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常，我既不提供源码给大家，也不提供Demo给大家，只是希望大家能跟着我的讲解，然后将代码一步步复制到本地，本人可以保证，页面上的代码复制到本地，绝对百分百运行，且得到与陌陌一样的运行效果。我这么做只为激起大伙的动手能力，望大家能明白我的用心。
好了，不废话了，直接本篇的实战开发吧。
我们看一下我们今天要做的实战案例效果图：
1. 鼠标划过前:
2. 鼠标划过右侧的图片时：
可能大伙看这个静态截图效果不是太清楚，这个大家可以直接访问天猫主页，然后再将本案例中的代码复制到本地运行，大家就会发现，两边实现的效果是一模一样的。
首先，我在天猫主页上面，获得了7张图片，编写html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="css3实战开发,html5实战开发,javascript实战开发,jquery实战开发,nodejs实战开发,div+css实战开发">
<link rel="stylesheet" href="styles.css" />
<title>CSS3实战开发:仿天猫首页图片展示动画效果</title>
</head>
<body>
<div class="floor-banner-container">
<div class="big_banner">
<a class="floor_banner" href="http://www.itdriver.cn">
<img src="p1.jpg" width="399" height="425" />
</a>
</div>
<div class="small_banner">
<a class="floor_banner" href="http://www.itdriver.cn">
<img src="p2.jpg" width="199" height="255" />
</a>
<a class="floor_banner" href="http://www.itdriver.cn">
<img src="p5.jpg" width="199" height="166" />
</a>
</div>
<div class="small_banner">
<a class="floor_banner" href="http://www.itdriver.cn">
<img src="p3.jpg" width="199" height="255" />
</a>
<a class="floor_banner" href="http://www.itdriver.cn">
<img src="p6.jpg" width="199" height="166" />
</a>
</div>
<div class="small_banner">
<a class="floor_banner" href="http://www.itdriver.cn">
<img src="p4.jpg" width="199" height="255" />
</a>
<a class="floor_banner" href="http://www.itdriver.cn">
<img src="p7.jpg" width="199" height="166" />
</a>
</div>
</div>
</body>
</html>
此时页面运行效果如下：
由于图片位于不同的块元素div中，默认是占满一样的，所以我们看到此时是换行显示的。
现在我们让内容居中显示，且按照图片的宽度，设置最外层容器.floor_banner-container的固定宽度为1000px，且让包裹图片的div容器向左浮动，以使所有图片显示在同一样，样式代码如下：
*{ /*清除所有元素默认的margin和padding*/
margin:0;
padding:0;
}
.floor-banner-container{ /*设置整个banner容器居中显示，且宽度固定为1000px*/
margin:0 auto;
width:1000px;
}
.floor-banner-container > div{ /*设置子容器向左浮动，让所有图片位于同一行*/
float:left;
}
此时我们再查看一下页面效果：
我们再回头看一下最开始成品的效果图，我们发现一大一小两个图片应该显示在一列中，现在确是处于同一行，我们知道，块元素默认占一行的，所以此时我们给.floor_banner应用样式吧：
.floor_banner{ /*将元素设置为block，同时给左下设置边框*/
display:block;
border-left:1px solid #E8E8E8;
border-bottom:1px solid #E8E8E8;
background:white;
overflow:hidden;
}
此时在看一下运行效果图：
至少目前页面样子已经出来了，我们再到天猫首页去看一下动画特效。我们发现，当鼠标划过图片所在区域时，图片会向左偏移一定距离；当鼠标划出时，又恢复原位。
好，知道了动画效果，我们现在就利用CSS3的transition属性来实现今天的实战案例：
.small_banner img{ /*给那些小图片应用动画渐变效果*/
position:relative;
-webkit-transition:left 0.2s ease-in;
-moz-transition:left 0.2s ease-in;
-o-transition:left 0.2s ease-in;
transition:left 0.2s ease-in;
}
.floor_banner:hover img{ /*当鼠标划过此类型元素时，将内部图片向左偏移5px*/
left:-5px;
}
大家从上面这段样式代码可以看到，我们只监听left属性的变化，同时为了实现图片相对于当前位置的偏移，我们设定了当前的position:relative.
至此，代码已经讲解完了，想实现天猫的动画效果，是不是很简单呢？
在这个过程中，可能有些讲的不到位或不对的地方，欢迎各位指正。
欢迎大家加入互联网技术交流群：62329335
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
CSS3实战开发:仿天猫首页图片展示动画特效实战开发,布布扣,bubuko.com