怎么使用纯CSS代码实现一个沙漏的动画效果
这篇文章主要为大家展示了"怎么使用纯CSS代码实现一个沙漏的动画效果"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"怎么使用纯CSS代码实现一个沙漏的动画效果"这篇文章吧。
代码解读
定义dom，容器中包含2个元素，分别代表沙漏的上半部和下半部：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:gainsboro;
}
定义容器尺寸，并设置子元素整体布局：
.loader{
width:4.3em;
height:9.8em;
font-size:10px;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between;
}
画出2个正方形：
.top,
.bottom{
width:3.5em;
height:3.5em;
border-style:solid;
border-color:saddlebrown;
}
通过边框、圆角和旋转，把2个正方形变成沙漏形状：
.top,
.bottom{
border-width:0.2em0.2em0.6em0.6em;
border-radius:500%50%30%;
}
.top{
transform:rotate(-45deg);
}
.bottom{
transform:rotate(135deg);
}
用伪元素画出沙子，上部的沙子的顶部是大圆弧，下部的沙子的顶部是小圆弧：
.top::before,
.bottom::before{
content:'';
position:absolute;
width:inherit;
height:inherit;
background-color:deepskyblue;
}
.top::before{
border-radius:0100;
}
.bottom::before{
border-radius:00035%;
}
定义沙子的动画属性：
.top::before,
.bottom::before{
animation:2slinearinfinite;
}
增加沙子从沙漏的上半部落下的动画效果：
.top::before{
animation-name:drop-sand;
}
@keyframesdrop-sand{
to{
transform:translate(-2.5em,2.5em);
}
}
增加沙子的沙漏在下半部堆积的动画效果：
.bottom::before{
transform:translate(2.5em,-2.5em);
animation-name:fill-sand;
}
@keyframesfill-sand{
to{
transform:translate(0,0);
}
}
隐藏沙漏上半部和下半部容器外的部分，此时上面2个动画的叠加效果是沙子从上半部漏下，慢慢在下半部堆积：
.top,
.bottom{
overflow:hidden;
}
用外层容器的伪元素制作一个窄长条，模拟流动的沙子：
.loader::after{
content:'';
position:absolute;
width:0.2em;
height:4.8em;
background-color:deepskyblue;
top:1em;
}
增加沙子流动的动画效果：
.loader::after{
animation:flow2slinearinfinite;
}
@keyframesflow{
10%,100%{
transform:translateY(3.2em);
}
}
最后，增加沙漏的翻转动画：
.loader{
animation:rotating2slinearinfinite;
}
@keyframesrotating{
0%,90%{
transform:rotate(0);
}
100%{
transform:rotate(0.5turn);
}
}
以上是"怎么使用纯CSS代码实现一个沙漏的动画效果"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！
