关于网站如何制作一个启动的图

由于最近博主特别喜欢《我想吃掉你的胰脏》这部电影，然后呢，最近也是特别关注这个网站的，然后呢，博主在打开他们的官网的时候，是特别喜欢他们的打开首页的启动动画的，接着接着......就有了我也想搞一个的想法~
话不多说，有了想法立马去想办法实现~
但是实现之路，也不是很顺利的~
在这里列举一下博主在实现之路中遇到的问题吧~

1. 博主最初打算利用html的优先级大于php的优先级来设置网页的，但是网页死活不跳转
2. 博主以为自己修好了跳转问题，在电脑测试没问题，但是手机一直在html页面反复跳转无法跳转到php页面
3. 换了很多歌跳转代码，手机端始终无法实现。

拜这个所赐，博主快搜刮了很多网站的教程了，那么最终是怎么实现的呢~
这时候我们的飘香豆腐大佬出来了~【哎呀，大佬出来，得心应手啊】
大佬出来的一句话：

经过百度，打开网站首页就弹出全屏div动画，延时几秒隐藏这个div即可

然后呢，博主也就明白了这个意思，但是还是打算制作一下html跳转php【傲娇病犯了......】
然后呢，飘香豆腐大佬也在陪着我试啊试啊~
终于23333我发现跳转好像确实有点麻烦，还要烧CPU，放弃了。
改成了大佬的建议~
以下是关键代码~
`

<style type="text/css">
    .loader {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url("请在此处填写你的加载页面的背景图片");

        background-size: cover;
        background-position: center 0px;
        background-repeat: no-repeat;
        overflow: hidden;
        visibility:visible;
        z-index:9999999;
    }

    @media screen and (max-width:500px){
        .loader{
            display:none;    
        }
    }

    .loader img {
        animation: loader 0.8s linear infinite;
        -webkit-animation: loader 0.8s linear infinite;
    }

    .loader h2 {
        margin-top: 10px;
        color: #515151;
    }

    @keyframes loader {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes loader {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }

        100% {
            opacity: 1;
        }
    }
</style>
<div class="loader">
    <img src="此处请填写加载的div盒子中的图片">
    <h2>你终于来啦~页面开始加载了哦~</h2>
</div>
<script>
    setTimeout(function(){
        document.querySelector('.loader').style.visibility = 'hidden'
    },3000)
</script>

`
就解决啦~