用了handsome主题有一段时间了，挺不错的主题!

在无数次更换各种博客程序后
最终还是选择使用Typecho&Handsome主题搭建博客
如果长久发展的话建议就用wordpress

进入正题:
代码没标明的都是添加至handsome主题后台主题设置 自定义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
}

头像呼吸光环

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

文章内打赏图标跳动

.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

首页文章版式圆角化

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

首页文章版式阴影化

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

图片抖动效果

img:hover {
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}

自定义滚动条滑块

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{
    width: 3px;
    height: 16px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: rgba(255,255,255,0);
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;

文章标题居中

.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

自定义鼠标样式

body {
    cursor:url('鼠标指针图片链接'), auto;
}
select, input, textarea, a, button {
    cursor:url('鼠标指针图片链接'), auto;
}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly] {
    cursor:url('鼠标指针图片链接'), auto;
}

一言随机句子API

添加至handsome主题后台 初级设置 首页一行文字介绍
PHP接口 随机句子 调用代码:

<script src="https://api.qqder.com/yan/api.php"></script>

PHP接口 ——选自散文集《我在人间凑数的日子》 调用代码:

<script src="https://api.qqder.com/share/api.php"></script>

其他API调用地址：https://api.qqder.com/

使用CDN后获取用户真实IP

typecho博客放在config.inc.php文本内

//防止 CDN 造成无法获取客户真实 IP 地址
if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
{
$list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
$_SERVER['REMOTE_ADDR'] = $list[0];
}

强制博客加载HTTPS

typecho博客放在config.inc.php文本内

/** 开启HTTPS */
define('__TYPECHO_SECURE__',true);

评论一键打卡赞踩

1.设置外观-开发者设置-自定义JavaScript

打卡赞踩JavaScript 

//打卡赞踩
function a(a, b, c) {
    if (document.selection) a.focus(), sel = document.selection.createRange(), c ? sel.text = b + sel.text + c : sel.text = b, a.focus();
    else if (a.selectionStart || "0" == a.selectionStart) {
        var l = a.selectionStart,
            m = a.selectionEnd,
            n = m;
        c ? a.value = a.value.substring(0, l) + b + a.value.substring(l, m) + c + a.value.substring(m, a.value.length) : a.value = a.value.substring(0, l) + b + a.value.substring(m, a.value.length);
        c ? n += b.length + c.length : n += b.length - m + l;
        l == m && c && (n -= c.length);
        a.focus();
        a.selectionStart = n;
        a.selectionEnd = n
    } else a.value += b + c, a.focus()
}
var b = (new Date).toLocaleTimeString(),
    c = document.getElementById("comment") || 0;
window.SIMPALED = {};
window.SIMPALED.Editor = {
daka: function() {
    a(c, "滴！学生卡！打卡时间：" + b, "，请上车的乘客系好安全带~")
},
zan: function() {
    a(c, "写得好好哟,我要给你生猴子！")
},
cai: function() {
    a(c, "骚年,我怀疑你写了一篇假的文章！")
}
};


2.PJAX回调函数也加入以上代码

3.然后在主题目录component/comments.php里面搜索 <div class="OwO padder-v-sm"></div>（目测134行）

评论一键打卡代码 

<!-- 打卡代码开始 -->
<div class="OwO" title="打卡" style="display: inline;" onclick="javascript:SIMPALED.Editor.daka();this.style.display='none'">
    <div class="OwO-logo"><i class="fontello-pencil"></i><span class="OwOlogotext">打卡</span></div>
</div>
<div class="OwO" title="赞" style="display: inline;" onclick="javascript:SIMPALED.Editor.zan();this.style.display='none'">
    <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-up"></i><span class="OwOlogotext"></span></div>
</div>
<div class="OwO" title="踩" style="display: inline;" onclick="javascript:SIMPALED.Editor.cai();this.style.display='none'">
    <div class="OwO-logo"><i class="glyphicon glyphicon-thumbs-down"></i><span class="OwOlogotext"></span></div>
</div>
<!-- 打卡代码结束 -->


4.设置外观-开发者设置-自定义CSS

/*私密评论按钮位置*/
.secret_comment {
top: 5px;
}
.OwO.OwO-open .OwO-body {
display:table
}

博客&浏览器标签栏装修

切换标签实现网页标题变化 看着挺装逼的
这里采用的typecho&handsome主题
放在footer.php文件的最后body标签外：
点击查看

<!--相逢何必曾相识-->

本站为非盈利性个人网站
本帖所有资源整合转载于网络，如果侵犯了您的权利，请及时联系我删除！
如果我的文章打动了你的内心或者对你有帮助请不妨打赏我一杯咖啡！

最后修改：2020 年 08 月 12 日 09 : 33 PM
© 允许规范转载
如果我的文章打动了你的内心或者对你有帮助请不妨打赏我一根烟钱！