這是一款使用CSS3和一點(diǎn)JS來(lái)制作的炫酷帶方向感應(yīng)的鼠標(biāo)滑過(guò)圖片3D動(dòng)畫(huà)特效。在特效中，當(dāng)用戶(hù)的鼠標(biāo)滑過(guò)網(wǎng)格中的圖片時(shí)，網(wǎng)格中的內(nèi)容遮罩層會(huì)出現(xiàn)3D翻轉(zhuǎn)動(dòng)畫(huà)，并且?guī)в蟹较蚋袘?yīng)，能夠從鼠標(biāo)進(jìn)入的方向開(kāi)始翻轉(zhuǎn)，效果非常的酷。
在線預(yù)覽 源碼下載
使用方法
HTML結(jié)構(gòu)
該方向感應(yīng)鼠標(biāo)滑過(guò)動(dòng)畫(huà)的HTML結(jié)構(gòu)采用無(wú)序列表的HTML結(jié)構(gòu)來(lái)制作網(wǎng)格布局，每一個(gè)<li>元素是一個(gè)網(wǎng)格。每個(gè)網(wǎng)格中使用一個(gè)<svg>元素來(lái)進(jìn)行占位，實(shí)際上它是一個(gè)圖片的小圖標(biāo)。另外div.info是要進(jìn)行3D翻轉(zhuǎn)的遮罩層。
CSS樣式
整個(gè)網(wǎng)格布局使用無(wú)序列表來(lái)制作，所有的li元素都采用左浮動(dòng)。
新聞熱點(diǎn)
疑難解答
圖片精選
