源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，只有1个元素：
<divclass="loader"></div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:teal;
}
画出一根木条：
.loader{
width:6em;
border-bottom:0.25emsolidwhite;
font-size:30px;
border-radius:0.125em;
}
用伪元素在其上画出一个盒子：
.loader{
position:relative;
}
.loader::before{
content:'';
position:absolute;
width:1em;
height:1em;
border:0.25emsolidwhite;
bottom:0;
left:0.5em;
border-radius:0.25em;
}
让图案倾斜，形成盒子在坡上的效果：
.loader{
transform:rotate(-45deg);
left:1em;
top:1em;
}
接下来制作动画。
让盒子一步步爬坡，爬到坡顶再重爬：
.loader::before{
animation:push3sinfinite;
}
@keyframespush{
0%{
transform:translateX(0);
}
20%,25%{
transform:translateX(1em);
}
40%,45%{
transform:translateX(2em);
}
60%,65%{
transform:translateX(3em);
}
80%{
transform:translateX(0);
}
}
增加盒子在爬坡的过程中的滚动效果：
@keyframespush{
0%{
transform:translateX(0)rotate(0deg);
}
20%,25%{
transform:translateX(1em)rotate(calc(90deg*1));
}
40%,45%{
transform:translateX(2em)rotate(calc(90deg*2));
}
60%,65%{
transform:translateX(3em)rotate(calc(90deg*3));
}
80%{
transform:translateX(0)rotate(0deg);
}
}
增加盒子在爬坡过程中的拟人效果：
@keyframespush{
0%{
transform:translateX(0)rotate(0deg);
}
5%{
transform:translateX(0)rotate(-5deg);
}
20%,25%{
transform:translateX(1em)rotate(calc(90deg*1+5deg));
}
30%{
transform:translateX(1em)rotate(calc(90deg*1-5deg));
}
40%,45%{
transform:translateX(2em)rotate(calc(90deg*2+5deg));
}
50%{
transform:translateX(2em)rotate(calc(90deg*2-5deg));
}
60%,65%{
transform:translateX(3em)rotate(calc(90deg*3+5deg));
}
70%{
transform:translateX(3em)rotate(calc(90deg*3-5deg));
}
80%{
transform:translateX(0)rotate(-5deg);
}
}
让木条在箱子爬到接近顶点时做抛掷动作：
.loader{
animation:throw3sinfinite;
transform-origin:20%;
}
@keyframesthrow{
0%,70%,100%{
transform:rotate(-45deg);
}
80%{
transform:rotate(-135deg);
}
}
增加盒子在爬到接近顶点时的掉落效果：
@keyframespush{
70%{
transform:translateX(3em)translateY(0)rotate(calc(90deg*3-5deg))scale(1);
filter:opacity(1);
}
80%{
transform:translateX(0)translateY(-5em)rotate(-5deg)scale(0);
filter:opacity(0.5);
}
90%{
transform:translateX(0)translateY(0)rotate(0deg)scale(0);
}
}
最后，隐藏掉可能超出页面的部分：
body{
overflow:hidden;
}
大功告成！
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c55464.shtml
