说明:博客用的主题一段时间了,体验还不错,特别适合做个人博客,而博主基于原主题做了下小小的修改,使其更加好看点,鉴于经常有人问博主修改方法,这里就在博客里说一下,顺便也说一下博客没有使用的修改方案,给同样使用主题的做下参考。
方法
1、首页文章版式圆角化
本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS。
圆角大小可修改15px数值
/*首页文章版式圆角化*/
.panel{
border: none;
border-radius: 15px;
}
.panel-small{
border: none;
border-radius: 15px;
}
.item-thumb{
border-radius: 15px;
}
2、鼠标点击特效
将以下代码放在主题的handsome/component/footer.php中的</body>之前即可
#字体自行修改
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
3、评论框特效
下载特效JS文件:commentTyping.js,将其放在网站目录某个地方,然后编辑主题文件handsome/component/footer.php,在</body>后面添加以下代码。
<script type="text/javascript" src="(JS文件路径)"></script>
4、首页头像转动并放大
本项修改的是首页头像,将鼠标放至头像后使其转动并放大。将以下代码添加至后台主题设置 自定义CSS。
#旋转速度请修改3s数值
/*首页头像放大并自动旋转*/
.thumb-lg{
width:130px;
}
@-webkit-keyframes rotation{
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.img-full{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
正在看本人博客的这位童鞋,我看你气度不凡,谈吐间隐隐有王者之气,日后必有一番作为!下面有个“赞”字,你就顺手把它点了吧~相的准,你就扫一下支持下哟;相不准,你也好回来找我~嘎嘎嘎