142 lines
2.4 KiB
CSS
142 lines
2.4 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#loading-box .loading-left-bg,
|
|
#loading-box .loading-right-bg {
|
|
position: fixed;
|
|
z-index: 999;
|
|
width: 50%;
|
|
height: 100%;
|
|
background-color: #515151e0;
|
|
transition: all 0.75s cubic-bezier(0.42, 0, 0, 1.01);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
#loading-box .loading-right-bg {
|
|
right: 0;
|
|
}
|
|
|
|
#loading-box > .spinner-box {
|
|
position: fixed;
|
|
z-index: 999999;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
#loading-box .spinner-box .loading-word {
|
|
position: absolute;
|
|
color: #ffffff;
|
|
font-size: 0.95rem;
|
|
transform: translateY(64px);
|
|
text-align: center;
|
|
}
|
|
|
|
.loading-title {
|
|
font-size: 1.25rem;
|
|
margin: 20px 10px 4px 10px;
|
|
}
|
|
|
|
#loading-box .spinner-box .configure-core {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #37474f;
|
|
}
|
|
|
|
/* 加载完成 */
|
|
.loaded .loading-left-bg {
|
|
transform: translate(-100%, 0);
|
|
}
|
|
|
|
.loaded .loading-right-bg {
|
|
transform: translate(100%, 0);
|
|
}
|
|
|
|
.loaded .spinner-box {
|
|
display: none !important;
|
|
}
|
|
|
|
.loader {
|
|
position: absolute;
|
|
top: calc(50% - 32px);
|
|
left: calc(50% - 32px);
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
perspective: 800px;
|
|
transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
|
|
}
|
|
|
|
.inner {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.inner.one {
|
|
left: 0%;
|
|
top: 0%;
|
|
animation: rotate-one 1s linear infinite;
|
|
border-bottom: 3px solid #efeffa;
|
|
}
|
|
|
|
.inner.two {
|
|
right: 0%;
|
|
top: 0%;
|
|
animation: rotate-two 1s linear infinite;
|
|
border-right: 3px solid #efeffa;
|
|
}
|
|
|
|
.inner.three {
|
|
right: 0%;
|
|
bottom: 0%;
|
|
animation: rotate-three 1s linear infinite;
|
|
border-top: 3px solid #efeffa;
|
|
}
|
|
|
|
noscript {
|
|
z-index: 1000;
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin-top: 26px;
|
|
}
|
|
|
|
@keyframes rotate-one {
|
|
0% {
|
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-two {
|
|
0% {
|
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-three {
|
|
0% {
|
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
|
|
}
|
|
}
|