目录

游戏h5-web加载页使用说明

JAY.LIN 收录于未分类

2022-01-25 约 458 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=122681149

目录

游戏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 和加载文字提示的间距大小参考游戏界面，每个设计稿的不一样，这里并不是都适配。细节部分需要微调