Finished Nav Bar and home page Under development

CascadingStyleSheets/General/fontface.css

@@ -13,6 +13,16 @@
     src: url(/File/Font/bailufeiyunshouxieti.ttf);
 }
 
+@font-face {
+    font-family: "cangefeibaiw02";
+    src: url(/File/Font/cangefeibaiw02.ttf);
+}
+
+@font-face {
+    font-family: "chengmingshouxieti";
+    src: url(/File/Font/chengmingshouxieti.ttf);
+}
+
 @font-face {
     font-family: "font-MZD";
     src: url(/File/Font/font-MZD.ttf);

CascadingStyleSheets/General/global.css

@@ -3,32 +3,53 @@
     /* Background */
     --bg-color: #d8dad7;
 
+    /* Scroll Bar */
+    --scroll-bar-width: 0.5vw;
+
     /* Font Size */
     --font-size-normal: 1.2em;
     --font-size-2em: 2em;
+    --font-size-2_5em: 2.5em;
+    --font-size-3em: 3em;
     --font-size-4em: 4em;
 
     /* Font Color */
     --font-color-title: #4a4a4a;
     --font-color-normal: #888888;
     --font-color-normal-selected: #111111;
+    --font-color-light-normal: #555555;
 
     /* Font face */
     --fontface-title: "PPAcma-Black", "YeZiGongChangTangYingHei-2";
     --fontface-title-2: "GenJyuuGothic-Normal";
 
     --fontface-content: "unifontdianzhenhei";
+    --fontface-content-2: "bailufeiyunshouxieti";
+    --fontface-content-3: "cangefeibaiw02";
 
     --fontface-art: "amelia", "font-MZD";
+
+    /* Display */
+    --display-phone: none;
+    --display-pc: initial;
 }
 
 @media screen and (max-width: 750px) {
 
     :root {
 
+        /* Scroll Bar */
+        --scroll-bar-width: 2vw;
+
         /* Font */
         --font-size-normal: 1em;
+        --font-size-2em: 1.5em;
+        --font-size-2_5em: 1.75em;
+        --font-size-3em: 2.5em;
         --font-size-4em: 3em;
-        --font-size-2em: 1.75em;
+
+        /* Display */
+        --display-phone: initial;
+        --display-pc: none;
     }
 }

CascadingStyleSheets/General/loading.css

@@ -3,6 +3,8 @@
 
     --loading-content-height: 60vh;
     --loading-content-width: 60vw;
+
+    --loading-progress-text-align: center;
 }
 
 @media screen and (max-width: 750px) {
@@ -11,6 +13,8 @@
 
         --loading-content-height: 80vh;
         --loading-content-width: 80vw;
+
+        --loading-progress-text-align: left;
     }
 }
 
@@ -19,11 +23,21 @@
     background: var(--bg-color);
     font-family: var(--fontface-content);
 
+    position: fixed;
+    top: 0;
+    left: 0;
     height: 100vh;
     width: 100vw;
     overflow: hidden;
+    opacity: 1;
 
     z-index: 1000;
+    transition: all 0.5s;
+}
+
+#box_loading.hide {
+    opacity: 0;
+    z-index: -1000;
 }
 
 #box_loading div > p:first-child {
@@ -69,3 +83,10 @@
     opacity: 0;
     transform: translateX(1em);
 }
+
+#box_loading div > ol:nth-child(2) p {
+
+    color: var(--font-color-normal);
+    font-size: var(--font-size-4em);
+    text-align: var(--loading-progress-text-align);
+}

CascadingStyleSheets/General/navigation.css

@@ -7,10 +7,15 @@
     --nav-p-padding-left: 1em;
     --nav-p-text-align: left;
 
+    --nav-navShow-p-height: auto;
+
     --nav-ul-width: 60%;
     --nav-ul-padding: 0.5em;
     --nav-ul-top: 2em;
     --nav-ul-right: 1em;
+    --nav-ul-opacity: 1;
+
+    --nav-navShow-ul-top: 0.5em;
 
     --nav-ul-li-width: calc(100% / 5);
     --nav-ul-li-height: 1em;
@@ -29,10 +34,15 @@
         --nav-p-padding-left: 0em;
         --nav-p-text-align: center;
 
+        --nav-navShow-p-height: 4.5vh;
+
         --nav-ul-width: 100%;
         --nav-ul-padding: 0.5em 0;
         --nav-ul-top: 3em;
         --nav-ul-right: 0em;
+        --nav-ul-opacity: 0;
+
+        --nav-navShow-ul-top: 2em;
 
         --nav-ul-li-width: 100%;   
         --nav-ul-li-height: 2em;
@@ -46,10 +56,42 @@
     overflow: var(--nav-overflow);
     color: var(--font-color-normal);
 
-    height: calc(1vh + var(--nav-p-height));
+    height: calc(var(--nav-p-height));
 
     width: 100vw;
     position: fixed;
+
+    top: 0em;
+
+    transition: top 0.5s, height 0.5s;
+
+    z-index: 1000;
+}
+
+#box_navBar.navShow {
+
+    height: calc(1vh + var(--nav-navShow-p-height));
+
+    top: 0em;
+}
+
+#box_navBar.navShow p {
+
+    background: rgba(255, 255, 255, 0.75);
+    box-shadow: 0.05em 0.05em 0.05em #999;
+    font-size: var(--font-size-2_5em);
+    height: var(--nav-navShow-p-height);
+    line-height: var(--nav-navShow-p-height);
+}
+
+#box_navBar.navShow ul {
+
+    top: var(--nav-navShow-ul-top);
+}
+
+#box_navBar.navHide {
+
+    top: -6em;
 }
 
 #box_navBar p {
@@ -65,8 +107,8 @@
 
     width: 100%;
     padding-top: 0.1em;
-    background: rgba(255, 255, 255, 0.5);
-    box-shadow: 0.05em 0.05em 0.05em #999;
+
+    transition: all 0.5s;
 }
 
 #box_navBar ul {
@@ -80,6 +122,9 @@
     right: var(--nav-ul-right);
 
     list-style-type: none;
+    opacity: var(--nav-ul-opacity);
+
+    transition: top 0.5s, opacity 0.5s;
 }
 
 #box_navBar ul li {
@@ -107,3 +152,100 @@
 #box_navBar ul li:active {
     transform: translateY(var(--nav-ul-li-active-top)) ! important;
 }
+
+#box_navBar.nav_MenuExpand {
+    height: 100vh;
+}
+
+#box_navBar.nav_MenuExpand p {
+    height: 100vh;
+    backdrop-filter: blur(0.15em);
+}
+
+#box_navBar.nav_MenuExpand ul {
+    opacity: 1;
+}
+
+#box_navBar #nav_Menu {
+
+    position: absolute;
+
+    display: none;
+
+    width: var(--nav-navShow-p-height)  ;
+    height: var(--nav-navShow-p-height);
+    opacity: 0;
+    right: 0.5em;
+
+    transition: 1s;
+    z-index: 10;
+
+    @starting-style {
+        opacity: 1;
+    }
+}
+
+#box_navBar.navShow #nav_Menu {
+
+    position: absolute;
+
+    display: var(--display-phone);
+
+    opacity: 1;
+
+    transition: 1s;
+
+    @starting-style {
+        opacity: 0;
+    }
+}
+
+svg {
+    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+path {
+    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),    stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),    stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+path:nth-child(1) {
+    transform-origin: 36% 40%;
+}
+path:nth-child(2) {
+    stroke-dasharray: 29 299;
+}
+path:nth-child(3) {
+    transform-origin: 35% 63%;
+}
+path:nth-child(4) {
+    stroke-dasharray: 29 299;
+}
+path:nth-child(5) {
+    transform-origin: 61% 52%;
+}
+path:nth-child(6) {
+    transform-origin: 62% 52%;
+}
+
+.nav_MenuClick svg {
+    transform: rotate(90deg);
+}
+.nav_MenuClick path:nth-child(1) {
+    transform: translateX(9px) translateY(1px) rotate(45deg);
+}
+.nav_MenuClick path:nth-child(2) {
+    stroke-dasharray: 225 299;
+    stroke-dashoffset: -72px;
+}
+.nav_MenuClick path:nth-child(3) {
+    transform: translateX(9px) translateY(1px) rotate(-45deg);
+}
+.nav_MenuClick path:nth-child(4) {
+    stroke-dasharray: 225 299;
+    stroke-dashoffset: -72px;
+}
+.nav_MenuClick path:nth-child(5) {
+    transform: translateX(9px) translateY(1px) rotate(-45deg);
+}
+.nav_MenuClick path:nth-child(6) {
+    transform: translateX(9px) translateY(1px) rotate(45deg);
+}
+