docs: add shimmer

krisk · Jul 11, 2023 · cdeb1e7 · cdeb1e7
1 parent 2dfcd12
commit cdeb1e7
Showing 1 changed file with 84 additions and 1 deletion.
diff --git a/docs/.vuepress/components/Sponsors/Sponsors.vue b/docs/.vuepress/components/Sponsors/Sponsors.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sponsors">
-    <h4>Sponsors</h4>
+    <h4 class="shimmer">Sponsors</h4>
     <div class="sponsor-section silver">
       <a
         class="sponsor-item"
@@ -108,4 +108,87 @@ const sponsors = ref([
 .dark .sponsors .action {
   color: white;
 }
+
+.shimmer {
+  /* text-align: center; */
+  color: rgba(255, 255, 255, 0.1);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(#222),
+    to(#222),
+    color-stop(0.5, #fff)
+  );
+  background: -moz-gradient(
+    linear,
+    left top,
+    right top,
+    from(#222),
+    to(#222),
+    color-stop(0.5, #fff)
+  );
+  background: gradient(
+    linear,
+    left top,
+    right top,
+    from(#222),
+    to(#222),
+    color-stop(0.5, #fff)
+  );
+  -webkit-background-size: 125px 100%;
+  -moz-background-size: 125px 100%;
+  background-size: 125px 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  background-clip: text;
+  -webkit-animation-name: shimmer;
+  -moz-animation-name: shimmer;
+  animation-name: shimmer;
+  -webkit-animation-duration: 2s;
+  -moz-animation-duration: 2s;
+  animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-color: #222;
+}
+
+@-moz-keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  100% {
+    background-position: top right;
+  }
+}
+
+@-webkit-keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  100% {
+    background-position: top right;
+  }
+}
+
+@-o-keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  100% {
+    background-position: top right;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  100% {
+    background-position: top right;
+  }
+}
 </style>