网站美化Loading加载动画

前言

这个动画是其它站长分享出来的，不过样式稍微有些单调，我对样式和动画更改了一下，效果可以参考阿七源码本站，喜欢自取！！

样式一

样式二

部署教程

/*加载动画*/
body:after {
    content: \" \";
    position: fixed;
    inset: 0;
    background-color: var(--main-bg-color);
    z-index: 999;
    background-image: url(上传的路径/loading.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
    }
}

这个的动画是svg格式的，这里简单说一下，SVG 格式的本质是矢量图形，是通过数学公式定义的图形，这意味着无论放大或缩小，图形都能保持清晰，不会出现像素化！ 我们可以通过 CSS 来控制 SVG 的样式，通过 JavaScript 来实现交互效果，这使得 SVG 成为了可以响应用户操作的动态元素！