feat: add sweep animation for founder membership icon

apps/client/components/Home/index.vue

@@ -16,9 +16,11 @@
           <div class="text-3xl font-medium">{{ userStore.user?.username }}</div>
           <span
             v-if="userStore.isFounderMembership()"
-            class="i-ph-crown-simple-fill bg-yellow-400"
+            class="i-ph-crown-simple-fill relative overflow-hidden bg-yellow-400"
             title="尊贵的创始会员,感谢您对 Earthworm 的大力支持！"
-          ></span>
+          >
+            <div class="glimmer"></div>
+          </span>
         </div>
         <div class="text-md text-gray-400">
           {{ userStore.user?.name }}
@@ -83,4 +85,42 @@ function useCalendarGraph() {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.glimmer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(139, 0, 0, 0.5) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  animation: glimmer 2s infinite;
+}
+
+@keyframes glimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* 添加浏览器前缀 做浏览器的兼容 */
+@-webkit-keyframes glimmer {
+  0% {
+    -webkit-transform: translateX(-100%);
+  }
+  100% {
+    -webkit-transform: translateX(100%);
+  }
+}
+
+.glimmer {
+  -webkit-animation: glimmer 2s infinite;
+}
+</style>