html载入动画怎么设置,CSS 3 实现 HTML 中的加载动画

首先是这个动画的效果图：

边框是我为了给动画区分布局加上的，实际上不需要；这里的动图不是循环的，看上去没有连贯性，实际效果不影响，下面是代码：

#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 元素作适当延迟的动画渐变。