[ 2022年4月8日更新 ]Typecho Handsome主题美化教程

我的博客：https://blog.itwk.cc

首页标题居中

主题设置-开发者设置-自定义CSS

/*主题标题居中开始*/
header.bg-light.lter.wrapper-md {text-align: center;
}
/*主题标题居中结束*/

多彩标签云

主题设置-PJAX-PJAX回调函数
主题设置-开发者设置-自定义JS

let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];info.style.backgroundColor = infosColor;
});
function addNumber(a) {var length = document.getElementById("comment").value.length;if(length> 0){document.getElementById("comment").focus()document.getElementById("comment").value += '\n' + a + new Date}else{document.getElementById("comment").focus()document.getElementById("comment").value += a + new Date}
}

赞赏按钮跳动

主题设置-开发者设置-自定义CSS

/*赞赏按钮跳动开始*/
.btn-pay {animation: star 0.5s ease-in-out infinite alternate;
}@keyframes star {from {transform: scale(1);}to {transform: scale(1.1);}
}
/*赞赏按钮跳动结束*/

滑动条美化

主题设置-开发者设置-自定义CSS

/*定义滚动条高宽及背景 横竖滚动条的尺寸开始*/ 
::-webkit-scrollbar {width: 8px;height: 6px  
}
/*定义滚动条高宽及背景 横竖滚动条的尺寸结束*/ /*定义滚动条轨道开始*/ 
::-webkit-scrollbar-track {background-color: transparent;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em
}
/*定义滚动条轨结束*/ /*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {background-color: #FFC0CB;background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius: 2em
}
/*定义滑块 内阴影+圆角结束*/

复制右上角显示版权

主题设置-开发者设置-自定义JS

/* 复制成功提示代码开始 */ 
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({message: "尊重原创，转载请注明出处！<br> 本文作者：xxx<br>原文链接："+sitesurl,title: "复制成功",type: "warning",autoHide: !1,time: "3000"})
}}
/* 复制成功提示代码结束 */

LOGO美化扫光效果同样适用于WordPress

主题设置-开发者设置-自定义CSS

/* logo扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/*logo扫光结束*/

版权信息

主题设置-开发者设置-自定义CSS

/*版权信息开始*/ 
.cutline span {background-color: rgb(236, 237, 238);border: 1px solid #d6d6d6;font: 12px Arial,Microsoft JhengHei;padding: 2px 4px;position: relative;top: -10px;
}
.post-copyright {font-size: 13px;margin: 8px 0;padding: 10px;border-left: 4px solid #3bd58a;background-color: rgba(220, 220, 220, 0.1);list-style: none;word-break: break-all;position: relative;overflow: hidden;
}
.post-copyright li {display: list-item;text-align: -webkit-match-parent;
}
.post-copyright a {color: rgba(0, 120, 231, 1);text-decoration: none;transition: color .1s;
}
/*版权信息结束*/

主题文件-post.php-页脚广告位下方

<!--版权信息&正文结束分割线--><div class="cutline"></div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong><?php $this->author(); ?></li><li class="post-copyright-link"><strong>本文链接：</strong><a href="<?php $this->permalink() ?>" title="<?php $this->title() ?>"><?php $this->permalink() ?></a></li><li class="post-copyright-license"><strong>版权声明：</strong>本博客所有文章除特别声明外，均默认采用<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><strong> CC BY-NC-SA 4.0 </strong></a> 许可协议。</li></ul>

头像转动并放大

/*头像转动放大开始*/
**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**
}
/*头像转动放大结束*/

头像呼吸光环

/*头像呼吸光环开始*/
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**;}
}
/*头像呼吸光环结束*/

首页文章板式阴影化

/*文章板式阴影化开始*/
**.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);
}
/*文章板式阴影化结束*/##### 首页文章板式圆角化
```css
/*首页文章板式园角化开始*/
**.panel**{**border**: none;**border-radius**: **15px**;
}**.panel-small**{**border**: none;**border-radius**: **15px**;
}**.item-thumb**{**border-radius**: **15px**;  
}
/*首页文章板式园角化结束*/