CSS3实战开发:仿天猫首页图片展示动画特效实战开发

浏览数：101 / 时间：2015年06月09日

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