按慣例,上GIF:
這是我今天參加面試時候,面試官讓我做的一道題,面試官坐我旁邊看我現場做,然而我比較菜,回來後才做出來……
來看看HTML部分:
由於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題,光描述就賊複雜,就不放出來了,今天的面試應該是掛了,哈哈。
最後,深圳南山,求職呀~