animated_avatar

_config.yml

@@ -171,6 +171,9 @@ plugins:
 
 style:
   darkmode: auto # set 'auto' to enable, set 'false' to disable
+  animated_avatar:
+    animate: auto # auto, always
+    background: https://img.vim-cn.com/7f/b2c0a988ce5a12108069b41f08234a83af51fa.webp
 
 default:
   avatar: https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/avatar/round/3442075.svg

layout/_partial/sidebar/logo.ejs

@@ -1,8 +1,15 @@
 <div class='logo-wrap'>
   <% if (md_text(theme.sidebar.logo.avatar)) { %>
-    <a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'><img no-lazy src='<%- md_text(theme.sidebar.logo.avatar) %>'/></a>
+    <a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'>
+      <% if (theme.style.animated_avatar.animate) { %>
+        <img no-lazy class='bg' src='<%- theme.style.animated_avatar.background %>'/>
+      <% } %>
+      <img no-lazy class='avatar' src='<%- md_text(theme.sidebar.logo.avatar) %>'/>
+    </a>
   <% } %>
   <% if (md_text(theme.sidebar.logo.title)) { %>
-    <a class='title' href='<%- url_for(md_link(theme.sidebar.logo.title) || "/") %>'><%- md_text(theme.sidebar.logo.title) %></a>
+    <a class='title' href='<%- url_for(md_link(theme.sidebar.logo.title) || "/") %>'>
+      <%- md_text(theme.sidebar.logo.title) %>
+    </a>
   <% } %>
 </div>

source/css/_layout/sidebar/sidebar.styl

@@ -17,21 +17,46 @@
     color: inherit
     display: flex
     align-items: center
-  .avatar
+  a.avatar
+    display: block
+    position: relative
     width: 50px
     height: 50px
     flex-shrink: 0
     border-radius: 50px
-    border: 2px solid transparent
     overflow: hidden
     margin-right: 1rem
-    trans1 background
+    img.avatar
-    &:hover
+      margin: 2px
-      background: $color-hover
-    img
       object-fit: cover
-      width: 100%
+      width: "calc(100% - 2 * %s)" % @margin
-      height: 100%
+      height: "calc(100% - 2 * %s)" % @margin
+      border-radius: @width
+    if hexo-config('style.animated_avatar.animate')
+      img.bg
+        trans1 opacity
+        position: absolute
+        opacity: 0
+        z-index: -1
+      @keyframes spin
+        from
+          transform:rotate(0deg)
+        to
+          transform:rotate(360deg)
+    if hexo-config('style.animated_avatar.animate') == 'always'
+      img.bg
+        opacity: 1
+        animation: spin infinite 1s
+        animation-timing-function: linear
+    if hexo-config('style.animated_avatar.animate') == 'auto'
+      &:hover
+        img.bg
+          opacity: 1
+          animation: spin infinite 1s
+          animation-timing-function: linear
+
+
+
   .title
     font-size: 1.75rem
     font-weight: 900