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

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

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

就是按下「開始吧」
之後從左消失
再從又出現(xiàn)新的右面
沒有換頁而且很流暢
右邊的圖也會(huì)跟著改
這能用什麼技術(shù)實(shí)現(xiàn)？

回答
編輯回答
喜歡你

設(shè)計(jì)這種頁面交互，就像是在Photoshop里使用圖層一樣，通過點(diǎn)擊“開始吧”按鈕觸發(fā)CSS的屬性變換，從而使得Wizard steps這個(gè)層浮動(dòng)出來（預(yù)設(shè)覆蓋整個(gè)頁面），具體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