WordPress子比主题实现网站进入Loading加载动画的方法

因为很多网站加载比较慢，那就需要等待，如果是空白的页面等待，比较无聊，访客也容易关闭掉网站，而设置一个加载动画，可能会让人增加耐心打开网站，降低所谓的跳出率。子比主题Loading加载动画，用户进入网站加载动画效果，很多动画用的是一些组件来做的动画，但是这个不是，这个是直接用的svg动画进行来做网站进场的动画的，喜欢的自行部署一下。

代码部署

接将下面的代码放到：子比主题–>>自定义CSS样式即可，里面有一个图片链接，修改为上面2个图片的链接即可。

/*加载动画*/
body:after {
    content: " ";
    position: fixed;
    inset: 0;
    background-color: white;
    z-index: 999;
    background-image: url(svg路径链接);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30%;
    animation: fadeOut 3s;
    animation-fill-mode: forwards;
    -webkit-transition: fadeOut 3s;
    transition: fadeOut 2s;
    pointer-events: none
}

@keyframes fadeOut {
    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

👋 感谢您的观看！