/* 加载遮罩层样式 */  
#loading {  
    bottom: 0;             /* 距离底部0px */  
    left: 0;               /* 距离左边0px */  
    position: fixed;       /* 固定定位，相对于浏览器窗口进行定位 */  
    right: 0;              /* 距离右边0px */  
    top: 0;                /* 距离顶部0px */  
    z-index: 9999;         /* 堆叠顺序，确保此元素位于其他元素之上 */  
    background-color: rgb(32, 35, 62); /* 背景颜色为深蓝色 */  
    pointer-events: none;  /* 鼠标事件无效，即无法与元素交云（如点击） */  
}  
  
/* 加载动画内部元素样式 */  
.loader-inner {  
    will-change: transform; /* 通知浏览器该元素将改变其变换，以便优化性能 */  
    width: 40px;            /* 宽度为40px */  
    height: 40px;           /* 高度为40px */  
    position: absolute;     /* 绝对定位，相对于最近的已定位（非static）祖先元素进行定位 */  
    top: 50%;               /* 距离顶部50% */  
    left: 50%;              /* 距离左边50% */  
    margin: -20px 0 0 -20px; /* 向上和向左移动自身宽高的一半，以实现居中 */  
    background-color: #3742fa; /* 背景颜色为亮蓝色 */  
    border-radius: 50%;     /* 边框半径为50%，实现圆形效果 */  
    animation: scaleout 0.6s infinite ease-in-out forwards; /* 应用名为scaleout的动画 */  
    text-indent: -99999px;  /* 文本缩进，这里用于隐藏可能的文本内容 */  
    z-index: 999991;        /* 堆叠顺序，确保此元素位于#loading之上 */  
}  
  
/* scaleout动画定义 */  
@keyframes scaleout {  
    0% {  
        transform: scale(0); /* 初始状态，缩放比例为0 */  
        opacity: 0;          /* 初始透明度为0 */  
    }  
    40% {  
        opacity: 1;          /* 动画中间阶段，透明度为1 */  
    }  
    100% {  
        transform: scale(1); /* 结束状态，缩放比例为1 */  
        opacity: 0;          /* 结束透明度为0 */  
    }  
}

p {  
    white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
}