页面载入前的动画效果

效果图如下:

动画.gif

仔细看中间其实是一个类似闪光的效果，原本是白色的，但白色的在动图上很难看出来，所以换成了黑色更引人注意(注意,本方法需要wow.js插件实现，很方便，wow.js是开源的)

先引入wow.js的css样式和js。
结构。结构很简单，上中下三个div即可.
wow.js的动画效果需要加基础类名wow，后面跟动画效果类名。运行wow.js的index检查元素即可查看各种不同效果的类名。

结构和类名

<div class="loading-top wow slideOutUp "  data-wow-delay="0.7s">

</div>
<div class="loading-middle middle">

</div>
<div class="loading-bottom wow slideOutDown" data-wow-delay="0.7s">

</div>

data-wow-delay为wow.js参数，意为动画延迟时间,需要延迟运行中间的部分。slideOutUp从下到上，slideOutDown从上到下。

css样式

/* 上和下同样的样式写到一起 */
.loading-top,.loading-bottom{
    position: absolute; /* 绝对定位，脱离文档流 */
    width: 100%;
    left: 0;
    height: 50vh; /* vh：可视口的高度 */
    background-color: #0068B7;
    z-index: 10; /* 层级10 */
}
.loading-top{
    top: 0; /* 定位 */
}
.loading-bottom{
    top: 50vh;  /* 向下移一半的高度 */
}
.loading-middle{
    position: absolute;
    width: 100%;
    height: 6px;
    background: #e7e7e7;
    z-index: 20;
    top: calc(50vh - 3px);  /* 中间那条线的样式，calc:计算,向下移一半的高度再减去本身的一半，实现垂直居中 */
}

中间部分的动画效果,(因为wow.js没有类似的效果，所以需要自己写)

.middle{
    animation: middle 0.3s forwards; //混合写法，绑定middle、动画持续时间、停留在动画的最后一帧
}
@keyframes middle{
    0% {
        opacity: 0; //透明度
        transform: scaleY(0.9); //纵轴方向上的缩小
    }

    30% {
        opacity: 1;
        transform: scaleY(0.7);
    }

    70% {
        opacity: 1;
        transform: scaleY(0.4);
    }

    100% {
        opacity: 0;
        transform: scaleY(0.1);
    }
}

最后一步引入内部js

//页面载入时执行...
if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
    new WOW().init();
};

*如果有滚动条就给body加一个overflow-x: hidden;，横轴方向溢出隐藏。

颜色觉得不好看可以更改，总体来说不难，注意不要路径不要弄错就没什么了。