ul和li實現翻書動畫效果
阿新 • • 發佈:2019-01-06
來看看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的應用,