游戏h5 web加载页使用说明

1.html部分

    <div id="splash">
        <img class="slogan" src="./slogan.png" alt="" />
        <div class="progress-bar stripes">
            <span style="width: 0%"></span>
        </div>
        <img class="tip" src="./tip.png" alt="" />
    </div>

说明

div splash 为加载页的主体部分
img logo为页面的主图slogan，跟游戏加载页保持一致（请找ui同事提供切图替换）
div progress为进度条，在页面中是一直不显示的。加载完成会进入游戏的加载页面
img tip为页面下方加载文字提示（由于是艺术字，请找ui同事提供艺术字图片替换即可）

2.css部分

#splash {
    width: 100%;
    height: 100%;
    background-image: url('./bg.png');
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 20;
    animation: toSmall 1.5s 0s both;
}
.stripes span {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    animation: animate-stripes 1s linear infinite;
}

@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 60px 0;
    }
}
#splash .slogan{
    width: 90vw;
    margin: 0 auto;
    margin-top: 15vh;
    animation: toBig 1.5s 0s both;
}

#splash .tip{
    width: 70vw;
    margin: 0 auto;
    margin-top: 20vh;
    animation: tipFlash 1.5s 0s infinite;
}

@keyframes tipFlash {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes toSmall {
    from {
        transform: scale(1.9);
        -webkit-transform: scale(1.9);
        -moz-transform: scale(1.9);
        -ms-transform: scale(1.9);
    }
    to {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
    }
}

@keyframes toBig{
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        -ms-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

说明

#splash 为加载页的主体部分，直接替换background-image的url地址来替换页面的背景图。其他的代码部分直接引用
slogan和加载文字提示的间距大小参考游戏界面，每个设计稿的不一样，这里并不是都适配。细节部分需要微调