修复锯齿问题

src/pages/index.astro

@@ -96,7 +96,7 @@ try {
       <Icon name="mdi:email" />
     </div>
     <div class="contact-container">
-      <h1><div class="text">联系我</div><div class="animation"></div></h1>
+      <h1><div class="text">联系我<div class="animation-before"></div></div><div class="animation"></div></h1>
       <table>
         <tbody>
           <tr>
@@ -540,6 +540,7 @@ try {
       --skew-angle: 15deg;
       --col1: var(--color-fg-0);
       --bg-width: 2rem;
+      --unit: calc(tan(var(--skew-angle)) * var(--height) * 0.5);
 
       height: var(--height);
       line-height: var(--height);
@@ -547,24 +548,29 @@ try {
       grid-template-columns: auto 1fr;
       color: var(--color-bg-0);
       margin-block-end: 0.5em;
+      position: relative;
 
       & > .text {
         background-color: var(--color-fg-0);
         position: relative;
 
+      }
+
+      & .animation-before {
+        width: calc(var(--unit) * 2);
+        position: absolute;
+        overflow: hidden;
+        height: 100%;
+        inset-inline-end: calc(var(--unit) * -2);
+        inset-block-start: 0;
+
         &::after {
           content: '';
           display: block;
-          position: absolute;
-          inset-inline-end: calc(tan(var(--skew-angle)) * var(--height) * -1);
-          inset-block-start: 0;
+          background-color: var(--col1);
+          width: 100%;
           height: 100%;
-          width: calc(tan(var(--skew-angle)) * var(--height));
-          background-image: linear-gradient(
-            to left bottom,
-            transparent 50%,
-            var(--col1) 50%
-          );
+          transform: skewX(var(--skew-angle)) translateX(calc(-1 * var(--unit)));
         }
       }
 
@@ -584,7 +590,7 @@ try {
         background-size: var(--bg-width) 100%;
         animation: bg-contact-roll infinite linear 2s;
         transform: skewX(var(--skew-angle))
-          translateX(calc(0.5 * tan(var(--skew-angle)) * var(--height) - 1px));
+          translateX(calc(var(--unit) - 1px));
       }
     }