甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
这篇文章主要为大家展示了“怎么使用纯CSS代码实现一个沙漏的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么使用纯CSS代码实现一个沙漏的动画效果”这篇文章吧。
我们提供的服务有：成都做网站、网站设计、外贸营销网站建设、微信公众号开发、网站优化、网站认证、昌邑ssl等。为上千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的昌邑网站制作公司
代码解读
定义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:50%100%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%00;
}
.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代码实现一个沙漏的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！