ul>li*3 實現翻書動畫效果

jawei_發表於2019-03-01
動畫

按慣例，上GIF：

ul>li*3 實現翻書動畫效果

重現：codepen.io/anon/pen/JJ…

這是我今天參加面試時候，面試官讓我做的一道題，面試官坐我旁邊看我現場做，然而我比較菜，回來後才做出來……

來看看HTML部分：

ul>li*3 實現翻書動畫效果

由於li是inline-block元素，所有沒有寫li的閉合，寫了的話每個li之間會有4px的間距，不寫瀏覽器也會自動補全。

CSS部分

    body {
        text-align: center;
    }
    
    ul {
        background: gray;
        width: 100%;
        padding: 20px;
        -webkit-perspective: 200;
    }
    
    li {
        list-style: none;
        height: 50px;
        width: 100px;
        padding: 0;
        margin: 0;
        display: inline-block;
        background: white;
        border-radius: 2px;
    }
    
    .anim {
        animation: anim 1s infinite;
        width: 100px;
        margin-left: -100px;
        background: white
    }
    
    @keyframes anim {
        to {
            transform: rotateY(-360deg);
        }
    }
    
    .anim2 {
        animation: anim2 1s infinite;
        width: 100px;
        margin-left: -100px;
        background: white
    }
    
    @keyframes anim2 {
        25% {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(-360deg);
        }
    }
複製程式碼

這個動畫效果的實現，主要靠是perspective + rotateY的應用，我面試時寫了rotateY，但是不知道perspective，所以做了很久沒做出立體效果來，後來面試官提示了我這個屬性，我回來後才做了出來。

對於這公司出的這面試題，其實我覺得挺坑的，我覺得只有做過這動畫的人才能當場做出來。

還有一道js題，光描述就賊複雜，就不放出來了，今天的面試應該是掛了，哈哈。

最後，深圳南山，求職呀~


相關文章