From 37fc29f3993281ef098a0327c1e2bf993bec83ae Mon Sep 17 00:00:00 2001
From: VayFou <159092352+talefou@users.noreply.github.com>
Date: Sat, 21 Dec 2024 12:13:24 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E9=98=85=E8=AF=BB=E6=9B=B4=E5=A4=9A?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 source/css/_vayfou/readmore.styl | 85 ++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 source/css/_vayfou/readmore.styl

diff --git a/source/css/_vayfou/readmore.styl b/source/css/_vayfou/readmore.styl
new file mode 100644
index 000000000..937644e2d
--- /dev/null
+++ b/source/css/_vayfou/readmore.styl
@@ -0,0 +1,85 @@
+//===========================
+// link-effects
+// 阅读更多的样式
+//===========================
+.link-fx-1 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: auto; // !important - set fixed height
+  right: 10px;
+  padding: 0 6px;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale
+
+  .icon {
+    width: 1.5rem;
+    position: absolute;
+    right: 0;
+    bottom: 1.5px;
+    -webkit-transform: translateX(100%) rotate(90deg);
+    transform: translateX(100%) rotate(90deg);
+
+    circle {
+      stroke-dasharray: 100;
+      stroke-dashoffset: 100;
+      transition: stroke-dashoffset .2s;
+    }
+
+    line {
+      transition: -webkit-transform .4s;
+      transition: transform .4s;
+      transition: transform .4s,-webkit-transform .4s;
+      -webkit-transform-origin: 13px 15px;
+      transform-origin: 13px 15px
+    }
+
+    line:last-child {
+      -webkit-transform-origin: 19px 15px;
+      transform-origin: 19px 15px
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: currentColor;
+    -webkit-transform-origin: right center;
+    transform-origin: right center;
+    transition: -webkit-transform .2s .1s;
+    transition: transform .2s .1s;
+    transition: transform .2s .1s,-webkit-transform .2s .1s
+  }
+
+  &:hover {
+    .icon {
+      circle {
+        stroke-dashoffset: 200;
+        transition: stroke-dashoffset .2s .1s;
+      }
+
+      line {
+        -webkit-transform: rotate(-180deg);
+        transform: rotate(-180deg)
+      }
+
+      line:last-child {
+        -webkit-transform: rotate(180deg);
+        transform: rotate(180deg)
+      }
+    }
+
+    &::before {
+      -webkit-transform: translateX(17px) scaleX(0);
+      transform: translateX(17px) scaleX(0);
+      transition: -webkit-transform .2s;
+      transition: transform .2s;
+      transition: transform .2s,-webkit-transform .2s
+    }
+  }
+}