于最近博主特别喜欢《我想吃掉你的胰脏》这部电影，然后呢，最近也是特别关注这个网站的，然后呢，博主在打开他们的官网的时候，是特别喜欢他们的打开首页的启动动画的，接着接着......就有了我也想搞一个的想法~

话不多说，有了想法立马去想办法实现~

但是实现之路，也不是很顺利的~

在这里列举一下博主在实现之路中遇到的问题吧~

1. 博主最初打算利用html的优先级大于php的优先级来设置网页的，但是网页死活不跳转

1. 博主以为自己修好了跳转问题，在电脑测试没问题，但是手机一直在html页面反复跳转无法跳转到php页面

1. 换了很多歌跳转代码，手机端始终无法实现。

拜这个所赐，博主快搜刮了很多网站的教程了，那么最终是怎么实现的呢~

这时候我们的 飘香豆腐 大佬出来了~【哎呀，大佬出来，得心应手啊】

大佬出来的一句话：

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

然后呢，博主也就明白了这个意思，但是还是打算制作一下html跳转php【傲娇病犯了......】

然后呢，飘香豆腐大佬也在陪着我试啊试啊~

终于23333我发现跳转好像确实有点麻烦，还要烧CPU，放弃了。

改成了大佬的建议~

以下是关键代码~

<!--以下新增开屏动画-->
<pre><code><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>
</code></pre>
<!--以上-->

就解决啦~