optimize bgzoom performance, view userCmt avatar

haojiezhe12345 · Jun 17, 2024 · fb4c2c8 · fb4c2c8
1 parent b1299b0
commit fb4c2c8
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 16 deletions.
diff --git a/index.css b/index.css
@@ -73,16 +73,15 @@ body>* {
 }
 
 .mainbg.animating:not(.bgzoom) div {
-    animation-name: bgzoomNoOpacity;
+    animation-name: bgzoom12;
     animation-duration: 10s;
     animation-timing-function: ease;
 }
 
 .mainbg.animating.bgzoom div {
-    animation-name: bgzoom, bgzoomNoOpacity;
-    animation-duration: 2s, 8s;
-    animation-timing-function: cubic-bezier(0.25, 0.25, 0, 1), linear;
-    animation-delay: 0s, 1.8s;
+    animation-name: bgzoom16;
+    animation-duration: 10s;
+    animation-timing-function: cubic-bezier(0.25, 0.1, 0, 0.9);
 }
 
 .mainbg>span {
@@ -95,7 +94,7 @@ body>* {
     font-size: 0.75rem;
     padding: 0.25rem 0.625rem;
     border-radius: 6.25rem;
-    animation-name: fadein;
+    animation-name: fadeinDelayed;
     animation-duration: 2s;
 }
 
@@ -105,19 +104,24 @@ body>* {
     animation-fill-mode: forwards;
 }
 
-@keyframes bgzoom {
-    from {
+@keyframes bgzoom16 {
+    0% {
         opacity: 0;
         transform: scale(1.6);
     }
 
-    to {
+    17% {
         opacity: 1;
-        transform: scale(1.2);
+        transform: scale(1.15);
+        animation-timing-function: linear;
+    }
+
+    100% {
+        transform: scale(1);
     }
 }
 
-@keyframes bgzoomNoOpacity {
+@keyframes bgzoom12 {
     from {
         transform: scale(1.2);
     }
@@ -127,11 +131,22 @@ body>* {
     }
 }
 
+
 @keyframes fadein {
     0% {
         opacity: 0;
     }
 
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeinDelayed {
+    0% {
+        opacity: 0;
+    }
+
     50% {
         opacity: 0;
     }
@@ -256,7 +271,7 @@ body>* {
     background-color: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(1vw);
     transition: opacity 1s;
-    animation-name: fadein;
+    animation-name: fadeinDelayed;
     animation-duration: 2s;
 }
 
@@ -307,7 +322,7 @@ body>* {
     background-color: wheat;
     color: black;
     border: 0.125rem solid orange;
-    animation: fadein 1s;
+    animation: fadeinDelayed 1s;
 }
 
 #banner.banner-info {
@@ -1218,8 +1233,7 @@ body>* {
     padding: 0.5rem 1rem;
     border-radius: 6.25rem;
     font-weight: bold;
-    animation: fadein 0.4s;
-    animation-delay: -0.2s;
+    animation: fadein 0.2s;
 }
 
 .commentSeekArrow>.tooltip::after {

diff --git a/index.js b/index.js
@@ -805,7 +805,9 @@ function showUserComment(user, useKamiAvatar = false) {
     if (user != null) {
         userCommentEl.innerHTML = /*html*/`
         <h2>
-            <img src="${useKamiAvatar != false ? `https://kami.im/getavatar.php?uid=${useKamiAvatar}` : `https://haojiezhe12345.top:82/madohomu/api/data/images/avatars/${user}.jpg`}" onerror="this.onerror=null;this.src='https://haojiezhe12345.top:82/madohomu/api/data/images/defaultAvatar.png'">
+            <img src="${useKamiAvatar != false ? `https://kami.im/getavatar.php?uid=${useKamiAvatar}` : `https://haojiezhe12345.top:82/madohomu/api/data/images/avatars/${user}.jpg`}"
+                onerror="this.onerror=null;this.src='https://haojiezhe12345.top:82/madohomu/api/data/images/defaultAvatar.png'"
+                onclick="viewImg(this.src)">
             <span>${user == '匿名用户' ? '<span class="ui zh">匿名用户</span><span class="ui en">Anonymous</span>' : user}${useKamiAvatar != false ? `<span class='kamiuid'>${useKamiAvatar}</span>` : ''}</span>
         </h2>
         `