淘宝商品分类条动画模拟

此处用css3实现

HTML

<ul class="icon-lists">
        <li class="box">
            <i class="icon">A</i>
            <div class="info">服装</div>
        </li>
        <li class="box">
            <i class="icon">B</i>
            <div class="info">鞋包</div>
        </li>
        <li class="box">
            <i class="icon">C</i>
            <div class="info">配饰</div>
        </li>
        <li class="box">
            <i class="icon">D</i>
            <div class="info">运动</div>
        </li>
    </ul>

CSS

* {
            margin: 0;
            padding: 0;
        }
        body {
            font: 12px/1.5 arail;
        }
        ul {
            list-style: none;
        }
        .icon-lists {
            overflow: hidden;
            background: #f7f7f7;
            padding: 40px;
        }
        .icon-lists .box {
            float: left;
            margin-right: 10px;
        }
        .box {
            position: relative;
            width: 46px;
            height: 46px;
            overflow: hidden;
            z-index: 1;
        }
        .box i,.box .info {
            display: block;
            width: 46px;
            height: 46px;
            border-radius: 46px;
        }
        .box .icon {
            position: absolute;
            top: 0;
            line-height: 46px;
            text-align: center;
            background: #eee;
            color: #333;
            font-size: 14px;
            
        }
        .box .info {
            position: absolute;
            top: 46px;
            z-index: 2;
            background: orange;
            color: #fff;
            text-align: center;
            line-height: 46px;
            -webkit-transition:top .2s ease-in;
            -moz-transition:top .2s ease-in;
            transition:top .2s ease-in;
        }
        .box:hover>.info {
            top:0;
        }