怎么使用纯CSS代码实现一个沙漏的动画效果

这篇文章主要为大家展示了“怎么使用纯CSS代码实现一个沙漏的动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“怎么使用纯CSS代码实现一个沙漏的动画效果”这篇文章吧。

　　代码解读

　　定义dom，容器中包含2个元素，分别代表沙漏的上半部和下半部：

　　<divclass="loader">

　　<spanclass="top"></span>

　　<spanclass="bottom"></span>

　　</div>

　　居中显示：

　　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代码实现一个沙漏的动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！