在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  Python/ css動(dòng)畫(huà)效果實(shí)現(xiàn)

css動(dòng)畫(huà)效果實(shí)現(xiàn)

像這個(gè)http://www.social-touch.com/s... 網(wǎng)站里面點(diǎn)擊圖上部分的動(dòng)畫(huà)是怎么實(shí)現(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
編輯回答
冷溫柔

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

2017年1月31日 05:18