feat: 回到顶部优化

D-Sketon · Dec 31, 2023 · bceb77c · bceb77c
1 parent bf94da1
commit bceb77c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -20,7 +20,10 @@
                 <% } %>
             </div>
             <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
-            <div class="sidebar-top"></div>
+            <div class="sidebar-top">
+              <img src="/images/taichi.svg" height="50" width="50"/>
+              <div class="arrow-up"></div>
+            </div>
             <div id="mask"></div>
         </div>
         <%- partial('_partial/mobile-nav', null, {cache: false}) %>

diff --git a/source/css/_partial/sidebar.styl b/source/css/_partial/sidebar.styl
@@ -393,16 +393,34 @@ $menu-link
   box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2)
   z-index: 999
 
-  &:before
-    width: 50px
-    height: 50px
-    display: flex
-    justify-content: center
-    align-items: center
-    content: "\f062"
-    color: var(--red-1)
-    font-size: 20px
+  img
+    transition: all 0.3s ease
+    animation: rotate-all 3s infinite
+    animation-timing-function: linear
+    opacity: 1
 
+  .arrow-up
+    transition: all 0.3s ease
+    opacity: 0
+    &:before
+      width: 50px
+      height: 50px
+      position: absolute
+      content: "\f062"
+      color: var(--red-1)
+      font-size: 20px
+      top: 0
+      left: 0
+      right: 0
+      bottom: 0
+      text-align: center
+      line-height: 50px
+
+  &:hover
+    img
+      opacity: 0
+    .arrow-up
+      opacity: 1
 
 .sidebar-toc
   width: 100%