From 1a96b03a52df105035349747814393a182febb61 Mon Sep 17 00:00:00 2001 From: KUN1007 Date: Sun, 12 Nov 2023 15:49:28 +0800 Subject: [PATCH] mod: loading --- index.html | 85 ++++++++++++++++++++++++++++++++++- public/kungalgame-loading.css | 84 ---------------------------------- 2 files changed, 84 insertions(+), 85 deletions(-) delete mode 100644 public/kungalgame-loading.css diff --git a/index.html b/index.html index 4e0a3d5c..0e7624af 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,96 @@ type="image/svg+xml" href="/src/assets/images/favicon.webp" /> - KUNGalgame +
diff --git a/public/kungalgame-loading.css b/public/kungalgame-loading.css deleted file mode 100644 index c7b09f98..00000000 --- a/public/kungalgame-loading.css +++ /dev/null @@ -1,84 +0,0 @@ -/* When page blank, loading */ - -: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: 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 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; - } -}