css动画效果实现

Question

像这个http://www.social-touch.com/s... 网站里面点击图上部分的动画是怎么实现的，有大神有思路吗？

Answer 1

<div class="main">
<div class="main-back"></div>
<div class="mian-content">5555</div>
</div>
.main{
width:200px;
height:200px;
position:relative;

}

.main-back,
.mian-content{
width:100%;
height:100%;
position:absalute;
}
.main-back{
display:none;
z-index:1;
background:red;
}
.mian-content{

z-index:2;

}
.main:hover .main-back{
display:block
}

Answer 2

这个效果包含两个部分：
first:
点击的div向左移动，也就是点击的时候设置left = 0;
second：
显示选项的div，看的出来是scale从0到1,位置从最左边到点击div的width