鍍金池/ 問答/HTML5  Python/ css動畫效果實現(xiàn)

css動畫效果實現(xiàn)

像這個http://www.social-touch.com/s... 網(wǎng)站里面點擊圖上部分的動畫是怎么實現(xiàn)的，有大神有思路嗎？
圖片描述

回答
編輯回答
眼雜

<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
}

2018年8月8日 21:22
編輯回答
冷溫柔

這個效果包含兩個部分：
first:
點擊的div向左移動，也就是點擊的時候設(shè)置left = 0;
second：
顯示選項的div，看的出來是scale從0到1,位置從最左邊到點擊div的width

2017年1月31日 05:18