要实现一个沙漏动画,我们首先需要实现一个漏斗的几何形状。
漏斗图形
我们接着把漏斗拆分成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);
}
}
在线实例
你可以在线自己试试看。
http://wow.techbrood.com/fiddle/1511
by iefreer