Yilia主题自定义头像旋转

主题默认把头像设置为静止的，这里写一下如何更改为动态旋转。

效果如下：

Ps: 鼠标移动到头像上时会旋转

方式一

1、修改左侧left-col代码

打开：Blog\themes\yilia\layout\_partial\ 目录下的left-col.ejs 文件：
找到代码段：

<a href="<%=theme.root%>" class="profilepic">
	<img src="<%=theme.avatar%>" class="js-avatar"></a>

替换为：

<% if(theme.Rotate == true){ %>
    <div id="ds-reset" class="ds-post-self">
    <div class="ds-avatar" >
    <img src="<%=theme.avatar%>"></div></div>
    <% } else if(theme.Rotate == false){%>
    <a href="<%=theme.root%>" class="profilepic"><img src="<%=theme.avatar%>" class="js-avatar"></a>
    <%}%>

2、修改主题配置

打开：\themes\yilia\ 目录下的 _config.yml
添加代码：

# 头像旋转
Rotate: true

3、修改CSS文件

打开：Blog\themes\yilia\source\目录下的main.xxxx.css:
在末尾添加代码：

/*头像旋转*/
#ds-reset .ds-avatar img{
width:124px;height:124px; /*图像的长和宽*/
border:5px solid #fff;
border-radius: 62px;/*设置图像圆角效果,设置了超过width/2的像素，即为圆形*/
-webkit-border-radius: 62px;/*圆角效果：兼容webkit浏览器*/
-moz-border-radius:62px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
-webkit-transition: 0.8s;
-webkit-transition: -webkit-transform 0.8s ease-out;
transition: transform 0.8s ease-out;/*变化时间设置为0.8秒(变化动作即为下面的图像旋转360度）*/
-moz-transition: -moz-transform 0.8s ease-out;
}
#ds-reset .ds-avatar img:hover{/*鼠标悬浮在头像时的CSS样式*/
transform: rotateZ(360deg);/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}

/**头像圆角*/
#ds-reset .ds-avatar img{
width:124px;height:124px; /*设置图像的长和宽*/
border-radius: 62px;/*设置图像圆角效果*/
-webkit-border-radius: 62px;/*圆角效果*/
-moz-border-radius:62px;
box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #3333sf;
}

重新部署即可，想切换为静态就在_config.yml里设置Rotate: false就行。

方式二

(方式一的代码我用着出了点小问题，可能是因为我改了其他代码，这是备用方案)

1、修改左侧left-col代码

打开：Blog\themes\yilia\layout\_partial\ 目录下的left-col.ejs 文件：
找到代码段：

<a href="<%=theme.root%>" class="profilepic">
	<img src="<%=theme.avatar%>" class="js-avatar"></a>

替换为：

<% if(theme.Rotate == true){ %>
			<a href="<%=theme.root%>" class="profilepic_rotate"><img src="<%=theme.avatar%>" class="js-avatar"></a>
			<% } else if(theme.Rotate == false){%>
			<a href="<%=theme.root%>" class="profilepic"><img src="<%=theme.avatar%>" class="js-avatar"></a>
			<%}%>

2、修改主题配置

打开：\themes\yilia\ 目录下的 _config.yml
添加代码：

# 头像旋转
Rotate: true

3、修改CSS文件

打开：Blog\themes\yilia\source\目录下的main.xxxx.css:
在末尾添加代码：

/* 头像旋转 */
.left-col #header .profilepic_rotate {
	display: block;
	border: 3px solid white;
	border-radius: 300px;
	width: 128px;
	height: 128px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: #88acdb;
	-webkit-transition: all .2s ease-in;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	text-align: center
}

.left-col #header .profilepic_rotate img {
	border-radius: 300px;
	opacity: 1;
    -webkit-transition: all .8s ease-out;
    
}

.left-col #header .profilepic_rotate img.show {
	width: 100%;
	height: 100%;
	opacity: 1
}
.left-col #header .profilepic_rotate img:hover {
	transform: rotateZ(360deg);
}

• 本文作者： 本该如此
• 本文链接： https://anyway521.github.io/post/acd038e3.html
• 最后更新： 2020年10月09日 22:44:30
• 版权声明： 博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议进行许可，转载请注明出处！

赞

赏杯Java？٩(๑^o^๑)۶

创作不易，感谢支持！