feat:为头像增加旋转效果

当鼠标悬浮到头像上时，头像旋转360度

 Changes to be committed:
       modified:   docs/3扩展主题的个性化设置.md
       modified:   themes/yilia/_config.yml
       modified:   themes/yilia/layout/_partial/head.ejs
       new file:   themes/yilia/source/avatarrotation.css

docs/3扩展主题的个性化设置.md

@@ -399,3 +399,48 @@ hexo g
 hexo d
 ```
 
+
+
+## 九、为头像增加旋转效果
+
+参考：[hexo模版yilia头像增加旋转效果/](https://qianlei6148.github.io/2018/10/01/hexo模版yilia头像增加旋转效果/)
+
+1. 在`themes\yilia\source\`文件夹下
+   增加一个css文件`avatarrotation.css`用来旋转360度
+   内容如下：
+
+```css
+.left-col #header .profilepic img {
+	/* 控制旋转速度时间*/
+  -webkit-transition: -webkit-transform 1.0s ease-out;
+  -moz-transition: -moz-transform 1.0s ease-out;
+  transition: transform 1.0s ease-out;
+}
+.left-col #header .profilepic img:hover {
+	/* 鼠标经过360% */
+  -webkit-transform: rotateZ(360deg);
+  -moz-transform: rotateZ(360deg);
+  transform: rotateZ(360deg);
+}
+```
+
+
+2. 然后在`themes\yilia\layout\_partial\head.ejs`文件中添加进去创建的`css`文件：
+   找到`<%- partial('css') %>`，在它的下面添加代码，把刚才写的文件添加进去，**注意！！是在它的下面添加，不然旋转速度将不会生效**
+
+```ejs
+<% if (theme.avatarrotation){ %>
+	<link rel="stylesheet" type="text/css" href="/./avatarrotation.css">
+<% } %>
+```
+如果`css`不生效，查看`css`中的`href`位置是否写错了，可根据你具体存放的位置写路径。
+
+
+3. 最后在`主题文件_config.yml`中添加
+
+```yml
+#头像是否旋转(如果不要旋转取false)
+avatarrotation: true
+```
+
+重新发布，最终就可以旋转了！

themes/yilia/_config.yml

@@ -3,9 +3,9 @@
 menu:
   主页: /
   #随笔: /tags/随笔/
-  分类: /categories
+  #分类: /categories
   归档: /archives
-  标签: /tags
+  #标签: /tags
 
 # SubNav
 subnav:
@@ -143,3 +143,6 @@ since: 2019
 # 是否开启访问量统计功能(不蒜子)
 busuanzi:
  enable: true
+
+#头像是否旋转(如果不要旋转取false)
+avatarrotation: true

themes/yilia/layout/_partial/head.ejs

@@ -32,6 +32,13 @@
     <link rel="icon" href="<%- theme.favicon %>">
   <% } %>
   <%- partial('css') %>
+
+<!--增加旋转头像的css-->
+<% if (theme.avatarrotation){ %>
+	<link rel="stylesheet" type="text/css" href="/./avatarrotation.css">
+<% } %>
+<!--增加旋转头像的css-->
+
   <style type="text/css">
   <% var defaultCtnBg = 'linear-gradient(200deg,#a0cfe4,#e8c37e)' %>
     #container.show {

themes/yilia/source/avatarrotation.css

@@ -0,0 +1,12 @@
+.left-col #header .profilepic img {
+	/* 控制旋转速度时间*/
+  -webkit-transition: -webkit-transform 1.0s ease-out;
+  -moz-transition: -moz-transform 1.0s ease-out;
+  transition: transform 1.0s ease-out;
+}
+.left-col #header .profilepic img:hover {
+	/* 鼠标经过360% */
+  -webkit-transform: rotateZ(360deg);
+  -moz-transform: rotateZ(360deg);
+  transform: rotateZ(360deg);
+}