update: add some transition and animation

adam5096 · adam5096 · commit 5a486b1d5c9f · 2025-03-04T22:25:49.000+08:00
diff --git a/blog.css b/blog.css
@@ -64,7 +64,7 @@
       min-width: 375px;
     }
 
-    .logo {
+    & .logo {
       width: auto;
       display: block;
 
@@ -85,8 +85,13 @@
         }
       }
     }
+    & a:hover {
+      transition: all 0.3s ease;
+      transform: scale(1.5);
+      cursor: pointer;
+    }
 
-    .nav-links {
+    & .nav-links {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -96,7 +101,7 @@
         flex-wrap: wrap;
       }
 
-      li {
+      & li {
         font-size: 20px;
         line-height: 30px;
         padding-left: 50px;
@@ -114,13 +119,18 @@
           padding-block: 12px;
         }
 
-        a {
+        & a {
           display: flex;
           align-items: center;
           justify-content: center;
           text-decoration: none;
           color: inherit;
         }
+        & a:hover {
+          transition: all 0.3s ease;
+          transform: scale(1.5);
+          cursor: pointer;
+        }
       }
     }
   }
@@ -167,17 +177,31 @@
               line-height: 30px;
               margin-right: 48px;
             }
+            & a:hover {
+              transition: all 0.3s ease;
+              transform: scale(1.5);
+              cursor: pointer;
+            }
           }
         }
 
         & .icon-search {
           width: 40px;
           height: 40px;
           overflow: hidden;
-          & img {
-            width: 100%;
-            height: 100%;
-            display: block;
+
+          & a {
+            & img {
+              width: 100%;
+              height: 100%;
+              display: block;
+            }
+          }
+
+          & a:hover img {
+            transition: all 0.3s ease;
+            transform: scale(1.5);
+            cursor: pointer;
           }
         }
       }
@@ -225,9 +249,11 @@
         gap: 60px;
 
         & .card {
+          width: 100%;
           display: flex;
           justify-content: space-between;
           gap: 24px;
+          position: relative;
 
           @media (max-width: 651px) {
             flex-direction: column;
@@ -342,18 +368,18 @@
                 }
               }
               & .more:hover {
-                animation: bounceScale 0.8s ease; /* 觸發動畫 */
+                /* 觸發動畫 */
+                animation-name: bounceScale;
+                animation-duration: 0.8s;
+                animation-timing-function: ease;
               }
 
               @keyframes bounceScale {
                 0% {
-                  transform: translateY(0);
-                }
-                50% {
-                  transform: translateY(-50px); /* 上移 50 px */
+                  transform: scale(1);
                 }
                 100% {
-                  transform: translateY(0); /* 落回原地，下移 50 px*/
+                  transform: scale(1.5);
                 }
               }
               /* more END */
diff --git a/blog.html b/blog.html
@@ -44,7 +44,7 @@
                             </li>
                         </ul>
                         <div class="icon-search">
-                            <img src="./img-blog/blog-search.png" alt="search">
+                            <a href="#"><img src="./img-blog/blog-search.png" alt="search"></a>
                         </div>
                 </nav>
                 <!-- 頭部導航 END -->
diff --git a/blogPage.css b/blogPage.css
@@ -61,7 +61,7 @@
       min-width: 375px;
     }
 
-    .logo {
+    & .logo {
       width: auto;
       display: block;
 
@@ -82,8 +82,13 @@
         }
       }
     }
+    & a:hover {
+      transition: all 0.3s ease;
+      transform: scale(1.5);
+      cursor: pointer;
+    }
 
-    .nav-links {
+    & .nav-links {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -93,7 +98,7 @@
         flex-wrap: wrap;
       }
 
-      li {
+      & li {
         font-size: 20px;
         line-height: 30px;
         padding-left: 50px;
@@ -111,13 +116,18 @@
           padding-block: 12px;
         }
 
-        a {
+        & a {
           display: flex;
           align-items: center;
           justify-content: center;
           text-decoration: none;
           color: inherit;
         }
+        & a:hover {
+          transition: all 0.3s ease;
+          transform: scale(1.5);
+          cursor: pointer;
+        }
       }
     }
   }
@@ -188,6 +198,12 @@
                 line-height: 24px;
               }
             }
+
+            & a:hover {
+              transition: all 0.3s ease;
+              transform: scale(1.3);
+              cursor: pointer;
+            }
           }
         }
 
@@ -200,10 +216,17 @@
             display: none;
           }
 
-          & img {
-            width: 100%;
-            height: 100%;
-            display: block;
+          & a {
+            & img {
+              width: 100%;
+              height: 100%;
+              display: block;
+            }
+          }
+          & a:hover img {
+            transition: all 0.3s ease;
+            transform: scale(1.5);
+            cursor: pointer;
           }
         }
       }
diff --git a/blogPage.html b/blogPage.html
@@ -12,7 +12,7 @@
         <!-- 頂端導航 -->
         <header>
             <nav class="nav">
-                <a href="#" class="logo">
+                <a href="./index.html" class="logo">
                     <picture>
                         <!-- RWD圖 -->
                         <source media="(min-width: 821px)" srcset="./img-imdex/sec-home/logo-new_工作區域 1@2x.png">
@@ -44,7 +44,7 @@
                             </li>
                         </ul>
                         <div class="icon-search">
-                            <img src="./img-blog/blog-search.png" alt="search">
+                            <a href="#"><img src="./img-blog/blog-search.png" alt="search"></a>
                         </div>
                     </div>
                 </nav>
diff --git a/series.css b/series.css
@@ -313,24 +313,33 @@
       & .list {
         width: 100%;
         height: auto;
-
+        position: relative;
         & .items {
+          position: relative;
           /* max-width: 306px; */
           width: auto;
           & .img-container {
             /* width: 306px; */
             height: 100%;
             /* 遮蓋圖片超出畫框的範圍 */
             overflow: hidden;
+            position: relative;
             & img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               /* 修飾圖片底部與畫框之間的白縫隙 */
               display: block;
             }
+            /* & img:hover {
+              transition: all 0.3s ease;
+              border-radius: 50%;
+              cursor: pointer;
+            } */
           }
+
           & .text {
+            width: 100%;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -347,6 +356,7 @@
               color: #aa0601;
             }
           }
+
           & .color {
             display: flex;
 

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@`
`64`	`64`	`min-width: 375px;`
`65`	`65`	`}`
`66`	`66`
`67`		`- .logo {`
	`67`	`+ & .logo {`
`68`	`68`	`width: auto;`
`69`	`69`	`display: block;`
`70`	`70`
`@@ -85,8 +85,13 @@`
`85`	`85`	`}`
`86`	`86`	`}`
`87`	`87`	`}`
	`88`	`+ & a:hover {`
	`89`	`+ transition: all 0.3s ease;`
	`90`	`+ transform: scale(1.5);`
	`91`	`+ cursor: pointer;`
	`92`	`+ }`
`88`	`93`
`89`		`- .nav-links {`
	`94`	`+ & .nav-links {`
`90`	`95`	`display: flex;`
`91`	`96`	`justify-content: center;`
`92`	`97`	`align-items: center;`
`@@ -96,7 +101,7 @@`
`96`	`101`	`flex-wrap: wrap;`
`97`	`102`	`}`
`98`	`103`
`99`		`- li {`
	`104`	`+ & li {`
`100`	`105`	`font-size: 20px;`
`101`	`106`	`line-height: 30px;`
`102`	`107`	`padding-left: 50px;`
`@@ -114,13 +119,18 @@`
`114`	`119`	`padding-block: 12px;`
`115`	`120`	`}`
`116`	`121`
`117`		`- a {`
	`122`	`+ & a {`
`118`	`123`	`display: flex;`
`119`	`124`	`align-items: center;`
`120`	`125`	`justify-content: center;`
`121`	`126`	`text-decoration: none;`
`122`	`127`	`color: inherit;`
`123`	`128`	`}`
	`129`	`+ & a:hover {`
	`130`	`+ transition: all 0.3s ease;`
	`131`	`+ transform: scale(1.5);`
	`132`	`+ cursor: pointer;`
	`133`	`+ }`
`124`	`134`	`}`
`125`	`135`	`}`
`126`	`136`	`}`
`@@ -167,17 +177,31 @@`
`167`	`177`	`line-height: 30px;`
`168`	`178`	`margin-right: 48px;`
`169`	`179`	`}`
	`180`	`+ & a:hover {`
	`181`	`+ transition: all 0.3s ease;`
	`182`	`+ transform: scale(1.5);`
	`183`	`+ cursor: pointer;`
	`184`	`+ }`
`170`	`185`	`}`
`171`	`186`	`}`
`172`	`187`
`173`	`188`	`& .icon-search {`
`174`	`189`	`width: 40px;`
`175`	`190`	`height: 40px;`
`176`	`191`	`overflow: hidden;`
`177`		`- & img {`
`178`		`- width: 100%;`
`179`		`- height: 100%;`
`180`		`- display: block;`
	`192`	`+`
	`193`	`+ & a {`
	`194`	`+ & img {`
	`195`	`+ width: 100%;`
	`196`	`+ height: 100%;`
	`197`	`+ display: block;`
	`198`	`+ }`
	`199`	`+ }`
	`200`	`+`
	`201`	`+ & a:hover img {`
	`202`	`+ transition: all 0.3s ease;`
	`203`	`+ transform: scale(1.5);`
	`204`	`+ cursor: pointer;`
`181`	`205`	`}`
`182`	`206`	`}`
`183`	`207`	`}`
`@@ -225,9 +249,11 @@`
`225`	`249`	`gap: 60px;`
`226`	`250`
`227`	`251`	`& .card {`
	`252`	`+ width: 100%;`
`228`	`253`	`display: flex;`
`229`	`254`	`justify-content: space-between;`
`230`	`255`	`gap: 24px;`
	`256`	`+ position: relative;`
`231`	`257`
`232`	`258`	`@media (max-width: 651px) {`
`233`	`259`	`flex-direction: column;`
`@@ -342,18 +368,18 @@`
`342`	`368`	`}`
`343`	`369`	`}`
`344`	`370`	`& .more:hover {`
`345`		`- animation: bounceScale 0.8s ease; /* 觸發動畫 */`
	`371`	`+ /* 觸發動畫 */`
	`372`	`+ animation-name: bounceScale;`
	`373`	`+ animation-duration: 0.8s;`
	`374`	`+ animation-timing-function: ease;`
`346`	`375`	`}`
`347`	`376`
`348`	`377`	`@keyframes bounceScale {`
`349`	`378`	`0% {`
`350`		`- transform: translateY(0);`
`351`		`- }`
`352`		`- 50% {`
`353`		`- transform: translateY(-50px); /* 上移 50 px */`
	`379`	`+ transform: scale(1);`
`354`	`380`	`}`
`355`	`381`	`100% {`
`356`		`- transform: translateY(0); /* 落回原地，下移 50 px*/`
	`382`	`+ transform: scale(1.5);`
`357`	`383`	`}`
`358`	`384`	`}`
`359`	`385`	`/* more END */`
Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@`
`61`	`61`	`min-width: 375px;`
`62`	`62`	`}`
`63`	`63`
`64`		`- .logo {`
	`64`	`+ & .logo {`
`65`	`65`	`width: auto;`
`66`	`66`	`display: block;`
`67`	`67`
`@@ -82,8 +82,13 @@`
`82`	`82`	`}`
`83`	`83`	`}`
`84`	`84`	`}`
	`85`	`+ & a:hover {`
	`86`	`+ transition: all 0.3s ease;`
	`87`	`+ transform: scale(1.5);`
	`88`	`+ cursor: pointer;`
	`89`	`+ }`
`85`	`90`
`86`		`- .nav-links {`
	`91`	`+ & .nav-links {`
`87`	`92`	`display: flex;`
`88`	`93`	`justify-content: center;`
`89`	`94`	`align-items: center;`
`@@ -93,7 +98,7 @@`
`93`	`98`	`flex-wrap: wrap;`
`94`	`99`	`}`
`95`	`100`
`96`		`- li {`
	`101`	`+ & li {`
`97`	`102`	`font-size: 20px;`
`98`	`103`	`line-height: 30px;`
`99`	`104`	`padding-left: 50px;`
`@@ -111,13 +116,18 @@`
`111`	`116`	`padding-block: 12px;`
`112`	`117`	`}`
`113`	`118`
`114`		`- a {`
	`119`	`+ & a {`
`115`	`120`	`display: flex;`
`116`	`121`	`align-items: center;`
`117`	`122`	`justify-content: center;`
`118`	`123`	`text-decoration: none;`
`119`	`124`	`color: inherit;`
`120`	`125`	`}`
	`126`	`+ & a:hover {`
	`127`	`+ transition: all 0.3s ease;`
	`128`	`+ transform: scale(1.5);`
	`129`	`+ cursor: pointer;`
	`130`	`+ }`
`121`	`131`	`}`
`122`	`132`	`}`
`123`	`133`	`}`
`@@ -188,6 +198,12 @@`
`188`	`198`	`line-height: 24px;`
`189`	`199`	`}`
`190`	`200`	`}`
	`201`	`+`
	`202`	`+ & a:hover {`
	`203`	`+ transition: all 0.3s ease;`
	`204`	`+ transform: scale(1.3);`
	`205`	`+ cursor: pointer;`
	`206`	`+ }`
`191`	`207`	`}`
`192`	`208`	`}`
`193`	`209`
`@@ -200,10 +216,17 @@`
`200`	`216`	`display: none;`
`201`	`217`	`}`
`202`	`218`
`203`		`- & img {`
`204`		`- width: 100%;`
`205`		`- height: 100%;`
`206`		`- display: block;`
	`219`	`+ & a {`
	`220`	`+ & img {`
	`221`	`+ width: 100%;`
	`222`	`+ height: 100%;`
	`223`	`+ display: block;`
	`224`	`+ }`
	`225`	`+ }`
	`226`	`+ & a:hover img {`
	`227`	`+ transition: all 0.3s ease;`
	`228`	`+ transform: scale(1.5);`
	`229`	`+ cursor: pointer;`
`207`	`230`	`}`
`208`	`231`	`}`
`209`	`232`	`}`