新聞中心
這篇文章給大家分享的是有關(guān)CSS如何實(shí)現(xiàn)圖片鼠標(biāo)懸停折疊效果的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)專注于船營(yíng)企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站制作。船營(yíng)網(wǎng)站建設(shè)公司,為船營(yíng)等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站,專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
CSS 實(shí)現(xiàn) 圖片鼠標(biāo)懸停折疊效果
1. 實(shí)現(xiàn)要點(diǎn)
折疊是由多個(gè)塊級(jí)元素來完成的;
圖片是以背景圖片的方式呈現(xiàn)出來的;
給每個(gè)塊級(jí)元素設(shè)置同一張背景圖片,通過background-position來控制顯示的區(qū)域(類似于雪碧圖);
通過ransform屬性來實(shí)現(xiàn)折疊效果;
整個(gè)包裹div的大小就是圖片的原大小,如果更改了尺寸,需要調(diào)整background-size等屬性調(diào)整背景圖片大小
2. 效果展示
3. 源碼
hover-folder
感謝各位的閱讀!關(guān)于“CSS如何實(shí)現(xiàn)圖片鼠標(biāo)懸停折疊效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
網(wǎng)頁(yè)題目:CSS如何實(shí)現(xiàn)圖片鼠標(biāo)懸停折疊效果
文章來源:http://www.dlmjj.cn/article/jepddg.html


咨詢
建站咨詢
