此文章发布于49个月前,部分信息可能已经过时,请自行斟酌确认
1、首页文章图片获取焦点放大
将以下代码添加至后台主题设置自定义CSS
,放大的时间和大小自行修改数值
/*首页文章图片获取焦点放大1*/
.item-thumb{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb:hover{
transform: scale(1.05);
}
.item-thumb-small{
cursor: pointer;
transition: all 0.6s;
}
.item-thumb-small:hover{
transform: scale(1.05);
}
2、鼠标经过头像转动并放大
将以下代码添加至后台主题设置自定义CSS,转动快慢和头像大小自行修改数值
/*首页头像自动旋转*/
.thumb-lg{
width:130px;
}
.avatar{
-webkit-transition: 0.4s;
-webkit-transition: -webkit-transform 0.4s ease-out;
transition: transform 0.4s ease-out;
-moz-transition: -moz-transform 0.4s ease-out;
}
.avatar:hover{
transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
}
#aside-user span.avatar{
animation-timing-function:cubic-bezier(0,0,.07,1)!important;
border:0 solid
}
#aside-user span.avatar:hover{
transform:rotate(360deg) scale(1.2);
border-width:5px;
animation:avatar .5s
}
3、Mac风格代码高亮
4、底部页脚标签样式
将以下代码添加至后台主题设置自定义CSS
/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}
将以下代码添加至后台主题设置博客底部左侧信息
,信息修改成自己的
<div class="github-badge">
<a href="./" title="©2019 晴栀">
<span class="badge-subject">©Copyright</span><span class="badge-value bg-blue">2019 晴栀</span>
</a>
</div>
<a href="http://beian.miit.gov.cn">     <img src="https://www.xinyouqu.com/usr/uploads/2019/11/2824256208.png">冀ICP备*******号<a/>
将以下代码添加至后台主题设置博客底部右侧信息
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
|
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
添加完成后,记得去handsome\component\footer.php
删除原有声明代码哦!
5、魔性动态标题
复制下方代码添加至后台主题设置自定义输出head 头部的HTML代码
即可
<!--动态标题-->
<script>document.addEventListener('visibilitychange',function(){if(document.visibilityState=='hidden'){normal_title=document.title;document.title='(つ·ェ·⊂)404 not find';}else{document.title=normal_title;}});</script>
6、文章底部赞赏图标跳动
将以下代码添加至后台主题设置自定义CSS
/*赞赏图标跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
7、彩色标签云Tag
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript
即可
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
如果主题中启用了pjax,还需要将上面代码添加到pjax-pjax
回调函数中。
8、右侧列表导航栏图标颜色
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS
即可
/*右侧列表导航栏图标颜色*/
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
滴!访客卡!请上车的乘客系好安全带,现在是:Tue Nov 12 2019 16:53:50 GMT+0800 (中国标准时间)