预加载动画（自定义）

来源：互联网发布：网络新闻发言人编辑：程序博客网时间：2024/05/20 02:55

css3样式

.loading_box {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 66;
}
.loader-inner, .loading, .loading_text {
    position: absolute;
    top: 50%;
}
.loading_text {
    color: #2a2474;
    font-family: "微软雅黑";
    font-size: 22px;
    left: 50%;
    margin-left: -36px;
    margin-top: 40px;
    width: 60px;
}
.loader-inner {
    height: 100px;
    left: 0;
    margin-top: -112px;
    width: 100%;
}
.inneer1 {
    animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.1s normal none infinite running line-scale;
    background: #940914 none repeat scroll 0 0;
}
.inneer2 {
    animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.2s normal none infinite running line-scale;
    background: #7a0f2c none repeat scroll 0 0;
}
.inneer3 {
    animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.3s normal none infinite running line-scale;
    background: #621641 none repeat scroll 0 0;
}
.inneer4 {
    animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.4s normal none infinite running line-scale;
    background: #401e60 none repeat scroll 0 0;
}
.inneer5 {
    animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.5s normal none infinite running line-scale;
    background: #2a2474 none repeat scroll 0 0;
}
.line-scale > div {
    animation-fill-mode: both;
    border-radius: 5px;
    display: inline-block;
    height: 100px;
    margin-right: 5px;
    width: 12px;
}
@keyframes line-scale {
0%, 100% {
    transform: scaleY(1);
}
50% {
    transform: scaleY(0.4);
}
}
.loading {
    display: inline-block;
    height: 60px;
    left: 50%;
    margin-left: -42px;
    margin-right: 40px;
    margin-top: -42px;
    width: 60px;
    z-index: 66;
}
.chart {
    height: 500px;
    margin: 0 auto;
    width: 1000px;
}
@keyframes heightdownup {
0% {
    height: 40px;
}
100% {
    height: 80px;
}
}
@keyframes fromTop {
0% {
    transform: translateY(-300%);
}
100% {
    transform: translateY(0px);
}
}
@keyframes fromTop {
0% {
    transform: translateY(-300%);
}
100% {
    transform: translateY(0px);
}
}
@keyframes fromDown {
0% {
    transform: translateY(100%);
}
100% {
    transform: translateY(0px);
}
}
@keyframes fromDown {
0% {
    transform: translateY(100%);
}
100% {
    transform: translateY(0px);
}
}

HTML代码

</div>
              
<div class="loading_box">
           <div class="loader-inner line-scale">
                <div class="inneer1"></div>
                <div class="inneer2"></div>
                <div class="inneer3"></div>
                <div class="inneer4"></div>
                <div class="inneer5"></div>
            </div>
            <div class="loading_text">Loading...</div>
    </div>
    <a class="banner_next fromTopDown" href="#conter2"></a>
</div>
          </div>

0 0