432 lines
8.7 KiB
HTML
432 lines
8.7 KiB
HTML
<style data-app-loading="inject-css">
|
|
@keyframes bounce05 {
|
|
85%,
|
|
92%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
89% {
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
95% {
|
|
transform: translateY(2px);
|
|
}
|
|
}
|
|
|
|
@keyframes slide05 {
|
|
5% {
|
|
transform: translateX(14px);
|
|
}
|
|
|
|
15%,
|
|
30% {
|
|
transform: translateX(6px);
|
|
}
|
|
|
|
40%,
|
|
55% {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
65%,
|
|
70% {
|
|
transform: translateX(-4px);
|
|
}
|
|
|
|
80%,
|
|
89% {
|
|
transform: translateX(-12px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(14px);
|
|
}
|
|
}
|
|
|
|
@keyframes paper05 {
|
|
5% {
|
|
transform: translateY(46px);
|
|
}
|
|
|
|
20%,
|
|
30% {
|
|
transform: translateY(34px);
|
|
}
|
|
|
|
40%,
|
|
55% {
|
|
transform: translateY(22px);
|
|
}
|
|
|
|
65%,
|
|
70% {
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
80%,
|
|
85% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
92%,
|
|
100% {
|
|
transform: translateY(46px);
|
|
}
|
|
}
|
|
|
|
@keyframes keyboard05 {
|
|
5%,
|
|
12%,
|
|
21%,
|
|
30%,
|
|
39%,
|
|
48%,
|
|
57%,
|
|
66%,
|
|
75%,
|
|
84% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
9% {
|
|
box-shadow:
|
|
15px 2px 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
18% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 2px 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
27% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 12px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
36% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 12px 0 var(--key),
|
|
60px 12px 0 var(--key),
|
|
68px 12px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
45% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 2px 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
54% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 2px 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
63% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 12px 0 var(--key);
|
|
}
|
|
|
|
72% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 2px 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
|
|
81% {
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 12px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
/* stylelint-disable selector-id-pattern */ /* 禁用规则 */
|
|
#__app-loading__ {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
#__app-loading__.hidden {
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: all 1s ease-out;
|
|
}
|
|
|
|
#__app-loading__ .title {
|
|
margin-top: 20px;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
color: rgb(0 0 0 / 85%);
|
|
}
|
|
|
|
.dark #__app-loading__ {
|
|
background: #0d0d10;
|
|
}
|
|
|
|
.dark #__app-loading__ .title {
|
|
color: #fff;
|
|
}
|
|
/* stylelint-enable selector-id-pattern */ /* 重新启用规则 */
|
|
|
|
/* ... */
|
|
.typewriter {
|
|
--blue: #5c86ff;
|
|
--blue-dark: #275efe;
|
|
--key: #fff;
|
|
--paper: #eef0fd;
|
|
--text: #d3d4ec;
|
|
--tool: #fbc56c;
|
|
--duration: 3s;
|
|
|
|
position: relative;
|
|
animation: bounce05 var(--duration) linear infinite;
|
|
}
|
|
|
|
.typewriter .slide {
|
|
width: 92px;
|
|
height: 20px;
|
|
margin-left: 14px;
|
|
background: linear-gradient(var(--blue), var(--blue-dark));
|
|
border-radius: 3px;
|
|
transform: translateX(14px);
|
|
animation: slide05 var(--duration) ease infinite;
|
|
}
|
|
|
|
.typewriter .slide::before,
|
|
.typewriter .slide::after,
|
|
.typewriter .slide i::before {
|
|
position: absolute;
|
|
content: '';
|
|
background: var(--tool);
|
|
}
|
|
|
|
.typewriter .slide::before {
|
|
top: 6px;
|
|
left: 100%;
|
|
width: 2px;
|
|
height: 8px;
|
|
}
|
|
|
|
.typewriter .slide::after {
|
|
top: 3px;
|
|
left: 94px;
|
|
width: 6px;
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.typewriter .slide i {
|
|
position: absolute;
|
|
top: 4px;
|
|
right: 100%;
|
|
display: block;
|
|
width: 6px;
|
|
height: 4px;
|
|
background: var(--tool);
|
|
}
|
|
|
|
.typewriter .slide i::before {
|
|
top: -2px;
|
|
right: 100%;
|
|
width: 4px;
|
|
height: 14px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.typewriter .paper {
|
|
position: absolute;
|
|
top: -26px;
|
|
left: 24px;
|
|
width: 40px;
|
|
height: 46px;
|
|
background: var(--paper);
|
|
border-radius: 5px;
|
|
transform: translateY(46px);
|
|
animation: paper05 var(--duration) linear infinite;
|
|
}
|
|
|
|
.typewriter .paper::before {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 6px;
|
|
left: 6px;
|
|
height: 4px;
|
|
content: '';
|
|
background: var(--text);
|
|
border-radius: 2px;
|
|
box-shadow:
|
|
0 12px 0 var(--text),
|
|
0 24px 0 var(--text),
|
|
0 36px 0 var(--text);
|
|
transform: scaleY(0.8);
|
|
}
|
|
|
|
.typewriter .keyboard {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 120px;
|
|
height: 56px;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.typewriter .keyboard::before,
|
|
.typewriter .keyboard::after {
|
|
position: absolute;
|
|
content: '';
|
|
}
|
|
|
|
.typewriter .keyboard::before {
|
|
inset: 0;
|
|
background: linear-gradient(135deg, var(--blue), var(--blue-dark));
|
|
border-radius: 7px;
|
|
transform: perspective(10px) rotateX(2deg);
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.typewriter .keyboard::after {
|
|
top: 25px;
|
|
left: 2px;
|
|
width: 11px;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
box-shadow:
|
|
15px 0 0 var(--key),
|
|
30px 0 0 var(--key),
|
|
45px 0 0 var(--key),
|
|
60px 0 0 var(--key),
|
|
75px 0 0 var(--key),
|
|
90px 0 0 var(--key),
|
|
22px 10px 0 var(--key),
|
|
37px 10px 0 var(--key),
|
|
52px 10px 0 var(--key),
|
|
60px 10px 0 var(--key),
|
|
68px 10px 0 var(--key),
|
|
83px 10px 0 var(--key);
|
|
animation: keyboard05 var(--duration) linear infinite;
|
|
}
|
|
</style>
|
|
<div id="__app-loading__">
|
|
<!-- ... -->
|
|
<div class="typewriter">
|
|
<div class="slide"><i></i></div>
|
|
<div class="paper"></div>
|
|
<div class="keyboard"></div>
|
|
</div>
|
|
<div class="title"><%= VITE_APP_TITLE %></div>
|
|
</div>
|