前端日常实战：118#视频演示如何用纯CSS制作沙漏加载器
时间：2023-04-05 01:56:38
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/VGegxr互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cVRr9cp源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读定义dom，容器包含2个元素，分别代表沙漏的上部和下部：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:gainsboro;}定义容器大小，设置子元素整体布局：.loader{width:4.3em;高度：9.8em；字体大小：10px；位置：相对；显示：弹性；弹性方向：列；对齐项目：居中；justify-content:space-between;}绘制2个正方形：.top,.bottom{width:3.5em;高度：3.5em；边框样式：实心；border-color:saddlebrown;}通过边框、圆角和旋转，两个正方形变成沙漏形状：.top,.bottom{border-width:0.2em0.2em0.6em0.6em;边界半径：50%100%50%30%；}.top{变换：旋转（-45deg）；}。bottom{transform:rotate(135deg);}使用伪元素绘制沙子，top上面的沙子是一个大圆弧，下面的沙子顶部是一个小圆弧：.top::before,.bottom::before{content:'';位置：绝对；宽度：继承；身高：继承；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{到{变换：平移（-2.5em，2.5em）；}}增加沙漏在下半部分堆积的动画效果：.bottom::before{transform:translate(2.5em,-2.5em);animation-name:fill-sand;}@keyframesfill-sand{to{transform:translate(0,0);}}把沙漏的上下两部分隐藏在容器外面，上面两个动画的叠加效果就是沙子从上半部分流到底部，往下漏，慢慢堆积在下半部分：.top,.bottom{overflow:hidden;}使用外层容器的伪元素做一个窄条模拟流沙：.loader::after{content:'';位置：绝对；宽度：0.2em；高度：4.8em；背景颜色：深天蓝；top:1em;}添加沙流动画效果:.loader::after{animation:flow2sli接近无限；}@keyframesflow{10%,100%{transform:translateY(3.2em);}}最后添加沙漏的翻转动画：.loader{animation:rotating2slinearinfinite;}@keyframesrotating{0%,90%{transform:rotate(0);}100%{变换：旋转（0.5圈）；}}你完成了！
