要实现一个沙漏动画，我们首先需要实现一个漏斗的几何形状。

漏斗图形

我们接着把漏斗拆分成3个简单图形：一个三角形，一个倒置三角形和中间的管道（垂直线）。

那么问题就简化为实现三角形和直线。

要实现三角形很简单，有模式可套用。

即使用零宽高的元素，设置1条边带颜色，相交的2条边为透明。这主要利用了颜色渲染区域在边界交接处按对角线平分的规则。

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

注意上面的width属性不是0而是1px，这是因为我们实际上需要的是带一点点秃顶的三角形（梯形），所以我们把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;
}

这样一个静态的漏斗就创建好了，如下所示：

添加动画

现在我们来给漏斗添加动画，漏斗的整个过程可以分解为3个动画：顶部变小、底部变大以及一个倒置（重来）。

前两者可以使用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);
    }
}

在线实例

你可以在线自己试试看。

by iefreer