kun-galgame-vue/index.html

110 lines
2.6 KiB
HTML
Raw Normal View History

2023-04-14 13:58:13 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
2023-06-17 16:57:29 +00:00
<link
rel="icon"
type="image/svg+xml"
2023-10-19 17:26:00 +00:00
href="/src/assets/images/favicon.webp"
2023-06-17 16:57:29 +00:00
/>
2023-04-14 13:58:13 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
2023-10-16 09:31:16 +00:00
<meta
name="description"
2023-11-07 14:28:42 +00:00
content="The CUTEST Visual Novel Forum!世界上最萌的 Galgame 论坛. Topic, Technique. NO ADs Forever. Free Forever"
2023-10-16 09:31:16 +00:00
/>
2023-11-07 14:28:42 +00:00
<title>KUNGalgame</title>
2023-11-12 07:49:28 +00:00
<style>
:root {
--kungalgame-blue-1: #b6e3ff;
--kungalgame-blue-4: #218bff;
--kungalgame-trans-blue-1: #b6e3ff77;
--kungalgame-shadow-0: 0px 0px 17px 5px var(--kungalgame-blue-1);
}
#kungalgame-loading-container {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
}
#kungalgame-loading {
height: 4.8px;
background: var(--kungalgame-blue-4);
box-shadow: var(--kungalgame-shadow-0);
box-sizing: border-box;
animation: kungalgame-loading 7.7s linear infinite;
position: relative;
}
#kungalgame-loading::after,
#kungalgame-loading::before {
content: '';
width: 10px;
height: 1px;
background: var(--kungalgame-blue-4);
position: absolute;
top: 9px;
right: -2px;
opacity: 0;
transform: rotate(-45deg) translateX(0px);
box-sizing: border-box;
animation: coli1 0.3s linear infinite;
}
#kungalgame-loading::before {
top: -4px;
transform: rotate(45deg);
animation: coli2 0.3s linear infinite;
}
#kungalgame-loading h2 {
position: absolute;
top: 17px;
color: var(--kungalgame-blue-4);
}
@keyframes kungalgame-loading {
0% {
width: 0;
}
100% {
width: 100%;
}
}
@keyframes coli1 {
0% {
transform: rotate(-45deg) translateX(0px);
opacity: 0.7;
}
100% {
transform: rotate(-45deg) translateX(-45px);
opacity: 0;
}
}
@keyframes coli2 {
0% {
transform: rotate(45deg) translateX(0px);
opacity: 1;
}
100% {
transform: rotate(45deg) translateX(-45px);
opacity: 0.7;
}
}
</style>
2023-04-14 13:58:13 +00:00
</head>
<body>
2023-11-10 07:16:36 +00:00
<div id="app">
<div id="kungalgame-loading-container">
<div id="kungalgame-loading"><h2>Loading</h2></div>
</div>
</div>
2023-11-07 14:28:42 +00:00
<script type="module" src="/src/main.ts"></script>
2023-04-14 13:58:13 +00:00
</body>
</html>