CSS实现的手风琴特效

CSS样式：

//图像个数  

@imageN:5;  

//图像hover之前的总宽度  

@w:800px;  

//图像hover之后的宽度  

@imageL:640px;  

//图像hover之前的宽度  

@imageS:@w/@imageN;  

//边框宽度  

@bdWidth:2px;  

//阴影宽度  

@shadowWidth:20px;  

.accordian{  

  width:@w + @bdWidth * @imageN + @shadowWidth*2;  

  margin:100px auto;  

  ul li{  

    float:left;  

    list-style:none;  

    width:@imageS;  

    transition:all 2s;  

    position:relative;  

    overflow:hidden;  

    border-left:1px solid rgba(255,255,255,.8);  

    border-left-width:@bdWidth;  

    box-shadow:0px 0px 20px rgba(0,0,0,0.8);  

    .image_title{  

      position:absolute;  

      width:100%;  

      height:50px;  

      background-color:rgba(0,0,0,.5);  

      text-indent:2em;  

     line-height:50px;  

      bottom:0px;  

      left:0  

      a{  

        color:#fff;  

        text-decoration:none;  

      }  

    }  

  }  

  ul:hover li{  

    width:@imageS - @imageL/@imageN;  

    -webkit-filter:grayscale(.8);  

    filter:grayscale(.8);  

  }  

  ul li:hover{  

    width:@imageL;  

    -webkit-filter:grayscale(0) hue-rotate(300deg);  

    filter:grayscale(0) hue-rotate(300deg);  

  }  

}  

　　

body程序：

<div class="image_title">
                Wall-E
            </div>  

                <img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085909530.jpg" style="width: 630px; height: 315px; ">  

        </li>
        <li>
            <div class="image_title">
                Up
            </div>  

                <img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085910531.jpg" style="width: 630px; height: 315px; ">  

        </li>
        <li>
            <div class="image_title">
                Cars 2
            </div>  

                <img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085911532.jpg" style="width: 630px; height: 315px; ">  

        </li>
    </ul>
</div>