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

鍍金池/ 問(wèn)答/HTML5  網(wǎng)絡(luò)安全  HTML/ airbnb 這個(gè)換頁(yè)的效果怎麼做的？

airbnb 這個(gè)換頁(yè)的效果怎麼做的？

https://www.airbnb.com.tw/hos...

就是按下「開(kāi)始吧」
之後從左消失
再?gòu)挠殖霈F(xiàn)新的右面
沒(méi)有換頁(yè)而且很流暢
右邊的圖也會(huì)跟著改
這能用什麼技術(shù)實(shí)現(xiàn)？

回答
編輯回答
喜歡你

設(shè)計(jì)這種頁(yè)面交互，就像是在Photoshop里使用圖層一樣，通過(guò)點(diǎn)擊“開(kāi)始吧”按鈕觸發(fā)CSS的屬性變換，從而使得Wizard steps這個(gè)層浮動(dòng)出來(lái)（預(yù)設(shè)覆蓋整個(gè)頁(yè)面），具體CSS代碼可以直接參考airbnb的源代碼，比如wizard層呼出：

    height: 100% !important;
    width: 100% !important;
    position: fixed !important;
    z-index: 102 !important;
    top: 0px !important;
    left: 0px !important;
    animation-name: keyframe_18jn58a !important;
    animation-duration: 1200ms !important;
    animation-timing-function: ease !important;
    background: rgb(255, 255, 255) !important;
2017年5月10日 23:00