预加载动画（自定义）

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>

              <!--

    作者：2968319036@qq.com

    时间：2016-07-18

    描述：预加载

-->

<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>