温江做网站
新网创想网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么用纯CSS实现抛盒子的loader
小编给大家分享一下怎么用纯CSS实现抛盒子的loader，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
成都网站制作,成都营销型网站-创新互联科技公司专注营销型网站建设及定制型网站开发。致力为您建设最有价值的网站,服务热线:028-86922220。
代码解读
定义dom，只有1个元素：
居中显示：
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:push4sinfinite;
}
@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;
}
以上是“怎么用纯CSS实现抛盒子的loader”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网站名称：怎么用纯CSS实现抛盒子的loader
链接地址：http://wjwzjz.com/article/jpcocj.html