From dd50aefa72255731971d661e9e0d281c8b13435e Mon Sep 17 00:00:00 2001
From: soragui <soragui@nativeng.org>
Date: Wed, 11 Jan 2023 19:43:43 +0800
Subject: [PATCH] update ano 3 link

---
 README.md        |  7 +++-
 index.html       |  3 ++
 styles/style.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 103 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 691d6ed..d38233e 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,7 @@
 
-> for css learning and html javascript
\ No newline at end of file
+> for css learning and html javascript
+
+#### how to use
+1. install vscode
+2. install live server extension
+3. open code and go live ....
\ No newline at end of file
diff --git a/index.html b/index.html
index 4f325f8..919c32a 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,9 @@
             <li><a class="slidinglink" href="#">Sliding Link</a></li>
             <li><a href="#" class="swappinlink" data-replace="See"><span>Go</span></a></li>
             <li><a href="#" class="growinglink"> Cool </a></li>
+            <li><a href="#" class="colorswapping"> Color Swapping </a></li>
+            <li><a href="#" class="rainbowlink"> Rainbow Underline</a></li>
+            <li><a href="#" class="passinglink"> Passing Underline</a></li>
         </ul>
         
      </div>
diff --git a/styles/style.css b/styles/style.css
index 869fd0b..0f80f7d 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -100,4 +100,98 @@ a {
 .growinglink:hover::before {
     bottom: 0;
     height: 100%;
+}
+
+/* r2l color swapping link */
+.colorswapping {
+    background-image: linear-gradient(
+        to right,
+        #54b3d6,
+        #54b3d6 50%,
+        #000 50%
+    );
+    background-size: 200% 100%;
+    background-clip: text;
+    background-position: -100%;
+    display: inline-block;
+    padding: 5px 0;
+    position: relative;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    transition: all 0.3s ease-in-out;
+}
+
+.colorswapping:before {
+    content: '';
+    background: #54b3d6;
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    transition: all 0.3s ease-in-out;
+}
+
+.colorswapping:hover {
+    background-position: 0;
+}
+
+.colorswapping:hover::before {
+    width: 100%;
+}
+
+/* the rainbow link */
+
+
+.rainbowlink {
+    color: inherit;
+    text-decoration: none;
+}
+
+.rainbowlink {
+    background:
+        linear-gradient(
+            to right,
+            rgba(100, 200, 200, 1),
+            rgba(100, 200, 200, 1)
+        ),
+        linear-gradient(
+            to right,
+            rgba(255, 0, 0, 1),
+            rgba(255, 0, 180, 1),
+            rgba(0, 100, 200, 1)
+    );
+    background-size: 100% 3px, 0 3px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 400ms;                              
+}
+  
+.rainbowlink:hover {
+    background-size: 0 3px, 100% 3px;
+}
+
+/* passing underline */
+.passinglink {
+    position: relative;
+}
+
+.passinglink::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border-radius: 4px;
+    background-color: aqua;
+    bottom: 0;
+    left: 0;
+    transform-origin: right;
+    transform: scaleX(0);
+    transition: transform .3s ease-in-out;
+}
+
+.passinglink:hover::before {
+    transform-origin: left;
+    transform: scaleX(1);
 }
\ No newline at end of file