怎么使用純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代碼實現一個沙漏的動畫效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！