要實現一個沙漏動畫，我們首先需要實現一個漏斗的幾何形狀。

漏斗圖形

我們接著把漏斗拆分成3個簡單圖形：一個三角形，一個倒置三角形和中間的管道（垂直線）。

那麼問題就簡化為實現三角形和直線。

要實現三角形很簡單，有模式可套用。

即使用零寬高的元素，設定1條邊帶顏色，相交的2條邊為透明。這主要利用了顏色渲染區域在邊界交接處按對角線平分的規則。

#bottom {
    border-right: 20px solid transparent;
    border-bottom: 20px solid #f57323;
    border-left: 20px solid transparent;
    height: 0px;
    width: 1px;
}
 

同樣我們可以實現一個倒置的三角形：

#top {
    border-top: 20px solid #f57323;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    height: 0px;
    width: 1px;
}

#line {
    border-left: 1px solid #f57323;
    height: 0px;
    width: 0px;
    position: absolute;
    top: 20px;
    left: 20px;
}
 

新增動畫

前兩者可以使用transform: scale方法，後者使用transform: rotate方法。另外我們給兩個三角形設定變換原點為底邊中心點處。

#top,#bottom{
  transform-origin: 50% 100%; //設定變換原點為底邊中心點處
}
#bottom{
  transform: scale(0); //設定底三角形初始為0
}
@keyframes top {
    100% {
        transform: scale(0); //頂三角形從1到0
    }
}
@keyframes bottom {
    100% {
        transform: scale(1); //底三角形從0到1
    }
}
@keyframes loader { //整個倒轉
    99% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}
 

線上例項

你可以線上自己試試看。