New: Update hover‘s animation of hyperlink in page About

New: Chage the cover image of work to svg
Fantasitao · Aug 14, 2024 · 2131daa · 2131daa
1 parent 23788e7
commit 2131daa
Show file tree

Hide file tree

Showing 7 changed files with 275 additions and 9 deletions.
diff --git a/assets/work/depression-zh.svg b/assets/work/depression-zh.svg
diff --git a/assets/work/depression.svg b/assets/work/depression.svg
diff --git a/assets/work/taobao.svg b/assets/work/taobao.svg
diff --git a/css/style.css b/css/style.css
@@ -1104,13 +1104,41 @@ body {
   font-size: 14px;
   line-height: 24px;
   font-weight: 500;
-  text-decoration: underline;
+  text-decoration: none;
   color: #B3B3C1;
   transition: color .15s ease-in;
+  position: relative;
+  /* 使a标签为相对定位 */
+}
+
+.about .about-info-left .introduce-desc a::after {
+  content: "";
+  /* 伪元素内容为空 */
+  position: absolute;
+  /* 绝对定位 */
+  left: 0;
+  /* 从左侧开始 */
+  bottom: 0;
+  /* 从底部开始 */
+  width: 100%;
+  /* 宽度为100% */
+  height: 1.5px;
+  /* 下滑线的高度 */
+  background-color: #6361DD;
+  /* 下滑线的颜色 */
+  transform: scaleX(0);
+  /* 初始状态下滑线的缩放为0 */
+  transition: transform 0.25s ease;
+  /* 平滑过渡效果 */
 }
 
 .about .about-info-left .introduce-desc a:hover {
-  color: #6361DC;
+  color: #6361DD;
+}
+
+.about .about-info-left .introduce-desc a:hover::after {
+  transform: scaleX(1);
+  /* 鼠标悬停时下滑线展开 */
 }
 
 .about .about-info-right {
@@ -1413,6 +1441,7 @@ body {
 
 .about .about-bottom .experience .item .project-experience .item .desc a {
   position: relative;
+  display: inline-block;
   color: #B3B3C1;
   text-decoration: none;
   font-size: 14px;

diff --git a/css/style.min.css b/css/style.min.css
diff --git a/css/style.scss b/css/style.scss
@@ -998,13 +998,34 @@ body {
                 font-size: 14px;
                 line-height: 24px;
                 font-weight: 500;
-                text-decoration: underline;
+                text-decoration: none;
                 color: $color-text-body-secondary;
                 transition: color .15s ease-in;
+                position: relative; /* 使a标签为相对定位 */
 
-                &:hover {
-                    color: $color-brand-default;
-                }
+                // &:hover {
+                //     color: $color-brand-default;
+                // }
+                // This block is the previous hover effect
+
+            }
+            a::after{
+                content: ""; /* 伪元素内容为空 */
+                position: absolute; /* 绝对定位 */
+                left: 0; /* 从左侧开始 */
+                bottom: 0; /* 从底部开始 */
+                width: 100%; /* 宽度为100% */
+                height: 1.5px; /* 下滑线的高度 */
+                background-color: #6361DD; /* 下滑线的颜色 */
+                transform: scaleX(0); /* 初始状态下滑线的缩放为0 */
+                transition: transform 0.25s ease; /* 平滑过渡效果 */
+            }
+            a:hover{
+                color: #6361DD; 
+                // text-decoration:underline;
+            }
+            a:hover::after {
+                transform: scaleX(1); /* 鼠标悬停时下滑线展开 */
             }
         }
     }
@@ -1305,6 +1326,7 @@ body {
                             }
                             a{
                                 position: relative;
+                                display: inline-block;//解决a标签跨行显示问题
                                 color: #B3B3C1; 
                                 text-decoration: none; 
                                 font-size: 14px; line-height: 24px;

diff --git a/work.html b/work.html
@@ -36,7 +36,7 @@
             <div class="card-list">
                 <div class="magical item">
                     <a href="./works/depression.html" target="_blank">
-                        <div class="dark"><img class="cover" src="./assets/work/depression.png"></div>
+                        <div class="dark"><img class="cover" src="./assets/work/depression.svg" alt="Experience Design about Depression  "></div>
                         <div class="text">
                             <div class="title-area">
                                 <div class="title">
@@ -51,7 +51,7 @@
                 </div>
                 <div class="magical item">
                     <a href="./works/taobao.html" target="_blank">
-                        <div class="dark"><img class="cover" src="./assets/work/taobao.png"></div>
+                        <div class="dark"><img class="cover" src="./assets/work/taobao.svg" alt="Taobao's Interaction Design for the Elderly"></div>
                         <div class="text">
                             <div class="title-area">
                                 <div class="title">