如何使用純CSS實(shí)現(xiàn)一個(gè)沙漏的動(dòng)畫(huà)效果

1、如何使用純css實(shí)現(xiàn)一個(gè)沙漏的動(dòng)畫(huà)效果源代碼下載代碼解讀定義dom，容器中包含2個(gè)元素，分離代表沙漏的上半部和下半部：居中顯示：bodymargin:0;height:100vh;display:flex;align-items:center;justify-content:center;background-color:gainsboro;定義容器尺寸，并設(shè)置子元素整體布局：.loaderwidth:4.3em;height:9.8em;font-size:10px;position:relative;display:flex;flex-direction:column;align-item

2、s:center;justify-content:space-between;畫(huà)出2個(gè)正方形：.top,.bottomwidth:3.5em;height:3.5em;border-style:solid;border-color:saddlebrown;通過(guò)邊框、圓角和旋轉(zhuǎn)，把2個(gè)正方形變成沙漏外形：.top,.bottomborder-width:0.2em0.2em0.6em0.6em;border-radius:50%100%50%30%;.toptransform:rotate(-45deg);.bottomtransform:rotate(135deg);用偽元素畫(huà)出沙子，上部的沙

3、子的頂部是大圓弧，下部的沙子的頂部是小圓?。?top:before,.bottom:beforecontent:&39;&39;position:absolute;width:inherit;height:inherit;background-color:deepskyblue;.top:beforeborder-radius:0100%00;.bottom:beforeborder-radius:00035%;定義沙子的動(dòng)畫(huà)屬性：.top:before,.bottom:beforeanimation:2slinearinfinite;增強(qiáng)沙子從沙漏的上半部落下的動(dòng)畫(huà)效果：.t

4、op:beforeanimation-name:drop-sand;keyframesdrop-sandtotransform:translate(-2.5em,2.5em);增強(qiáng)沙子的沙漏在下半部積累的動(dòng)畫(huà)效果：.bottom:beforetransform:translate(2.5em,-2.5em);animation-name:fill-sand;keyframesfill-sandtotransform:translate(0,0);躲藏沙漏上半部和下半部容器外的部分，此時(shí)上面2個(gè)動(dòng)畫(huà)的疊加效果是沙子從上半部漏下，漸漸在下半部積累：.top,.bottomoverflow:hidd

5、en;用外層容器的偽元素制作一個(gè)窄長(zhǎng)條，模擬流淌的沙子：.loader:aftercontent:&39;&39;position:absolute;width:0.2em;height:4.8em;background-color:deepskyblue;top:1em;增強(qiáng)沙子流淌的動(dòng)畫(huà)效果：.loader:afteranimation:flow2slinearinfinite;keyframesflow10%,100%transform:translatey(3.2em);最后，增強(qiáng)沙漏的翻轉(zhuǎn)動(dòng)畫(huà)：.loaderanimation:rotating2slinearinfinite;keyframesrotati