首先是这个动画的效果图:
边框是我为了给动画区分布局加上的,实际上不需要;这里的动图不是循环的,看上去没有连贯性,实际效果不影响,下面是代码:
#div_loading {
border: 1px solid #444444;
position: absolute;
width: 100px;
height: 100px;
}
.DIV_loadingLines {
background: #686868;
width: 3px;
height: 15px;
transform-origin: 50% 0%;
position: absolute;
left: 50px;
top: 50px;
opacity: 0;
}
.DIV_loadingLines:nth-child(1) {
animation: loadingAnimation 1200ms linear infinite 100ms;
transform: rotate(0deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(2) {
animation: loadingAnimation 1200ms linear infinite 200ms;
transform: rotate(30deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(3) {
animation: loadingAnimation 1200ms linear infinite 300ms;
transform: rotate(60deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(4) {
animation: loadingAnimation 1200ms linear infinite 400ms;
transform: rotate(90deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(5) {
animation: loadingAnimation 1200ms linear infinite 500ms;
transform: rotate(120deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(6) {
animation: loadingAnimation 1200ms linear infinite 600ms;
transform: rotate(150deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(7) {
animation: loadingAnimation 1200ms linear infinite 700ms;
transform: rotate(180deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(8) {
animation: loadingAnimation 1200ms linear infinite 800ms;
transform: rotate(210deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(9) {
animation: loadingAnimation 1200ms linear infinite 900ms;
transform: rotate(240deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(10) {
animation: loadingAnimation 1200ms linear infinite 1000ms;
transform: rotate(270deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(11) {
animation: loadingAnimation 1200ms linear infinite 1100ms;
transform: rotate(300deg) translate(0,10px);
}
.DIV_loadingLines:nth-child(12) {
animation: loadingAnimation 1200ms linear infinite 1200ms;
transform: rotate(330deg) translate(0,10px);
}
@keyframes loadingAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
实现方式是对加载中动画的 12 条线作单独的动画处理,用到了 CSS 3 中的动画属性。先从中选 1 条线,把其余的 11 条线暂时先排除,然后仔细看这 1 条线的动画,可以录个视频然后慢放,不难看出实际上动画只是在无限循环地渐入和渐出,然后把其它的线给加上来,能够看出其它的线依次比前 1 条线稍稍慢一点,把这些单独的线条动画有序地组合起来就成了最终的动画效果。放在代码上的具体实现就是先要有 12 条线,所以用宽度为 3px,高度为 15px 的 div 元素当做线条,然后对每一个 div 元素作适当延迟的动画渐变。