feat(animate): avatar transition

BNDong · Apr 18, 2023 · 68b6cd2 · 68b6cd2
1 parent 0610c04
commit 68b6cd2
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 0 deletions.
diff --git a/docs/v2/Docs/Customization/config.md b/docs/v2/Docs/Customization/config.md
@@ -887,6 +887,32 @@ window.cnblogsConfig = {
 }
 ```
 
+
+### avatar - 头像旋转特效
+
+?> 版本 >= v2.1.3
+
+-   类型：`Object`
+-   默认值：
+
+```json
+{
+  enable: false // 是否开启
+}
+```
+
+```javascript
+window.cnblogsConfig = {
+    animate: {
+        avatar: {
+            enable: false,
+        },
+    },
+}
+```
+
+
+
 ## code - 代码
 
 ### type - 代码渲染类型

diff --git a/src/components/config/config.json5 b/src/components/config/config.json5
@@ -170,6 +170,9 @@
         size: 8,
         sizeF: 36
       }
+    },
+    avatar: {
+        enable: false,
     }
   },
 

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
@@ -339,4 +339,15 @@ export default function main(_) {
             }, 300);
         });
     })();
+
+    /**
+     * 头像旋转动效
+     */
+    (() => {
+        if (_.__config.animate.avatar.enable) {
+            $('#menuBlogAvatar').addClass('img-rounded')
+            $('.author_avatar').addClass('img-rounded')
+            $('.feedbackAvatar').addClass('img-rounded')
+        }
+    })();
 }
diff --git a/src/style/simpleMemory.css b/src/style/simpleMemory.css
@@ -2056,6 +2056,18 @@ div#tbCommentBodyPreview {
     font-size: 14px
 }
 
+.img-rounded {
+    transition: transform 0.5s ease-out;
+    -webkit-transition: transform 0.6s ease-out;
+    -moz-transition: transform 0.5s ease-out;
+    -ms-transition: transform 0.5s ease-out;
+    -o-transition: transform 0.5s ease-out;
+}
+
+.img-rounded:hover {
+    transform: rotate(1turn);
+}
+
 #cnblogs_post_body img {
     max-width: 700px;
     margin: 10px 0