首页 > 代码库 > CSS3实战开发:仿天猫首页图片展示动画特效实战开发
CSS3实战开发:仿天猫首页图片展示动画特效实战开发
各位网友大家好，我是陌上花会开，人称陌陌。今天我带领大家开发一个仿天猫首页图片展示动画特效的案例。一如往常，我既不提供源码给大家，也不提供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