HTML5 做循环次序载入效果Loading...

文章分类:设计前沿 发布时间:2015-12-18 原文作者:推我一把 阅读( )

在Loading的时候,会有几个圆点,次序闪动,然后周而复始。我们来实现这种效果。

首先要了解CSS3的相关知识,用到了animation动画,所谓的闪动效果,其实是一种放大再缩放。

我们可以用transform:scale(1.5); 代表完全放大1.5倍,然后再缩放回去,就实现了简单的闪动效果。

先简单把HTML写一下,定义一个DIV,包含了四个span,分别为黑红蓝黄的背景,宽50px;高50px

现在是方形,还不是圆形怎么办,简单,border-radius:25px;  这个25怎么来?就是宽度/2,如果是正方形的话就是正圆了。

下边进行分析,我们需要第一个黑球闪动的时候,其他的球不动,黑球闪动结束,红球还是跳动,其他球保持不变,以此类推。

我们假设动画时间为N,黑球过了N时间后,变为静止,红球开始动。因为要连续动画,所以我们想让动画有等待间隔。

时间0,黑球动,其他静

时间N,黑球结束动画开始静,红球动

那么黑球在一个动画结束后需要等待的时间为,N+N+N = 3N 需要等待3个时间周期。

但是我们查了资料,发现是没有循环中的动画,第一次动画和第二次动画 之间的时间间隔这一说的,那该怎么办呢?

我们可以用另外一种思路去替代:

动画不一定动才能称为动画,我们可以把动画的周期延长,把黑球的等待的3N时间也计入他的动画中,只是3N的时间它没有变化,但是元素还是在动画周期中。

这样一来,我们每个元素设置动画周期为4N,跳动并恢复是在N时间内完成,剩下的3N毫无变化(等待其他元素动画完成),3N时间过后,最后一颗球恢复正常,等待本身剩余的3N无变化的动画时间,这时候黑球的4N动画周期结束,又开始动了。

这样一分析,貌似解决了问题。

我们还差一步,设定动画delay,推迟执行时间,在一次动画中,黑球动,红球需要等待黑球完成跳动才能动,所以需要等待时间为黑球的跳动时间为N,同理篮球需要等待2N时间,黄球需要等待3N时间。

这样就真正解决了问题,我们来整理一下:

每个元素添加放大恢复动画,动画周期为4N,在N/2时间动画变大为105倍,在N时间动画回复原样,剩下3N无变化

第一个元素delay时间为0 

第二个元素delay时间为N

第三个元素delay时间为2N

...........................

那么我们的CSS代码是怎样的呢?

 

span{display:inline-block;width:50px;height:50px;border-radius:25px;margin-left:40px;}
#s1{background: black;}
#s2{background: red}
#s3{background: blue }
#s4{background: orange}
@-webkit-keyframes loading{ 
    25%{transform:scale(1.5);-webkit-transform:scale(1.5);}
    50%,100%{transform:scale(1);-webkit-transform:scale(1);}
}
@keyframes loading{
    25%{transform:scale(1.5);-webkit-transform:scale(1.5);}
    50%,100%{transform:scale(1);-webkit-transform:scale(1);}
}
span{animation: loading ;-webkit-animation: loading; -webkit-animation-duration: 4s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;}
#s2{-webkit-animation-delay: 1s;
    -o-animation-delay: 1s;
    animation-delay: 1s;
}
#s3{-webkit-animation-delay: 2s;
    -o-animation-delay: 2s;
    animation-delay: 2s;
}
#s4{-webkit-animation-delay: 3s;
    -o-animation-delay: 3s;
    animation-delay: 3s;
}
以上。demo演示:http://changziming.com/share/Loading
原文来自:tui518.com