分享一个css全屏加载特效

        #loading {
            position: fixed;
            width: 100%;
            height: 100vh;
            z-index: 9999;
            background-color: #eef1f5;
            top: 0;
        }
    .loading {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .loading div {
        position: relative;
        min-width: 40px;
        height: 200px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #eef1f5);
        margin: 20px;
        border-radius: 20px;
        border: 2px solid #eef1f5;
        box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
            -15px -15px 20px #fff,
            inset -5px -5px 5px rgba(255, 255, 255, 0.5),
            inset 5px 5px 5px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    }

    .loading div::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1),
            0 420px 0 400px lightskyblue;
        animation: animate 2s ease-in-out infinite;
        animation-delay: calc(var(--x) * -0.3s);
        transform: translateY(160px);
    }

    @keyframes animate {
        0% {
            transform: translateY(160px);
            filter: hue-rotate(0deg);
        }

        50% {
            transform: translateY(0px);
            filter: hue-rotate(180deg);
        }

        100% {
            transform: translateY(160px);
            filter: hue-rotate(360deg);
        }
    }</code></pre></div></div><h6 id="229oq" name="HTML">HTML</h6><p>放在body开头即可</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">    &lt;!-- 懒加载组件 --&gt;
&lt;div id=&#34;loading&#34;&gt;
    &lt;div class=&#34;loading&#34;&gt;
        &lt;div style=&#34;--x:0&#34;&gt;&lt;/div&gt;
        &lt;div style=&#34;--x:1&#34;&gt;&lt;/div&gt;
        &lt;div style=&#34;--x:2&#34;&gt;&lt;/div&gt;
        &lt;div style=&#34;--x:3&#34;&gt;&lt;/div&gt;
        &lt;div style=&#34;--x:4&#34;&gt;&lt;/div&gt;
        &lt;div style=&#34;--x:5&#34;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre></div></div><h6 id="6hb05" name="JS">JS</h6><p>最后加载完成使用js删除，放在body尾部即可</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0">    &lt;script&gt;
    // 停止懒加载，展示页面
    window.addEventListener(&#39;load&#39;, function () {
        var loading = document.getElementById(&#39;loading&#39;);
        loading.parentNode.removeChild(loading);
    });
&lt;/script&gt;</code></pre></div></div><p>© 版权声明</p><p>THE END</p><p>编程