前言
首先，俺只是修改了一下css相关，然后同样引入了一些内容，然后有不少不记得来源的魔改了，望谅解。
本文适配Handsome v9.2.1，如果非此版本的请自行调整。
博主的介绍——彩字闪现
很常见的彩字闪现。
<span class="text-muted text-xs block">
<div id="chakhsu"></div>
<script>var chakhsu = function(r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(),
l.style.color = t(),
n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step--:(c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay--:(c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")),
r.textContent = c.text,
r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))),
setTimeout(i, d)
}
/*以下内容自定义修改*/
var l = "",
o = ["老游戏爱好者&纸片人爱好者"].map(function(r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
chakhsu(document.getElementById('chakhsu'));</script>
</span>
</span>自定义输出head 头部的HTML代码——引入图标和字体
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://834832894.r.cdn36.com/chinesefonts3/packages/sypxzs/dist/思源屏显臻宋/result.css' /> 另外源代码里面还有引入一段我自己搭的统计代码，那个我就不写了……
博客底部左侧/右侧信息
佳凌雾杨 | <a href="https://project.chukogals.top/go/pIb1Uqxz/"><img alt="Static Badge" src="https://img.shields.io/badge/鄂ICP备-2021014936--1号-blue"></a> | <a href="https://project.chukogals.top/go/8v8v8Nyj/"><img alt="Static Badge" src="https://img.shields.io/badge/萌备-20227730号-pink"></a>其实核心就是shields他们家的图标怎么使用的。
右边没啥太大区别我贴一块吧：
<img src = "https://img.chukogals.top/beian.png"> <a href="https://project.chukogals.top/go/h7npBNqB/"><img alt="Static Badge" src="https://img.shields.io/badge/鄂公安网备-42010202002669号-green"></a> |自定义CSS
这个占了大头，所以我就分块吧。
文章一二三四级标题美化
我博客整体是#1199c4风格，因此大多数魔改都是参考别人的彩色稍微改成了以蓝色为主。另外里面微微修了一些排版方面不舒服的地方。
/*文章一二三四级标题美化*/
#post-content h1 {font-size: 30px;background : linear-gradient(to bottom,transparent 60%,rgba(0, 153, 255, 0.3) 0)!important no-repeat}
#post-content h2 {position: relative;margin: 20px 0 32px!important;font-size: 1.55em;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#post-content h1, #post-content h2 {background: #fff}
#post-content h2::after {transition:all .35s;content:"";position:absolute;background:linear-gradient(#3c67bd8c 30%,#3c67bd 70%);width:1em;left:0;box-shadow:0 3px 3px rgba(32,160,255,.4);height:3px;bottom:-13px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-4px;position:absolute}
#post-content h2:hover::after {width: 2.5em;}
#post-content h1,#post-content h2,#post-content h3,#post-content h4,#post-content h5,#post-content h6 {color:#666;line-height:1.4;font-weight:700;margin:30px 0 10px 0}打赏图标跳动
太常见了。
/*打赏图标跳动*/
.btn-pay {
/*background-color: #337ab7;*/
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
/*.btn-pay:active,.btn-yellow:focus {*/
/* color: #fff*/
/*}*/
.btn-pay:hover {
/*color: #fff;*/
/*background: #337ab7;*/
transition: all .2s ease-in-out
}滚动条自定义(蓝色)
其实只是改了一下配色而已。
/*滚动条自定义(蓝色)*/
::-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: #43B4FF;
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
}头像呼吸光环(蓝色)和鼠标悬停旋转放大
同上。
/*头像呼吸光环(蓝色)和鼠标悬停旋转放大*/
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.15) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #0099ff;
}
25% {
box-shadow: 0 0 16px #0099ff;
}
50% {
box-shadow: 0 0 4px #0099ff;
}
75% {
box-shadow: 0 0 16px #0099ff;
}
100% {
box-shadow: 0 0 4px #0099ff;
}
}自定义左侧图标配色/首页文章列表悬停上浮
/*自定义左侧图标*/
span.nav-icon>svg,span.nav-icon>i {
color: #457ea1;
}
/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(229, 245, 255, 0.471);
}头图超出/超出部分隐藏/手机不显示标签云和热门
/*头图超出*/
.index-post-img {
overflow: hidden;
border-radius: 8px;
}
.item-thumb,
.item-thumb-small {
transition: all 0.3s;
border-radius: 8px;
}
/*超出部分隐藏*/
.entry-thumbnail {
overflow: hidden;
border-radius: 8px;
}
#post-content img {
border-radius: 8px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
border-radius: 8px;
}
.item-thumb:hover,
.item-thumb-small:hover {
transform: scale(1.1);
border-radius: 8px;
}
/*手机不显示标签云和热门*/
@media (max-width:767px) {
#tabs-4,#tag_cloud-2 {
display: none;
}
}首页深色模式发光
这个我印象最深，当时花了好久折腾相关css容器的定位……
/*首页深色模式发光*/
html.theme-dark .panel{
box-shadow: 1px 1px 5px 5px rgba(0, 153, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(0, 153, 255, 0.35);
}
html.theme-dark .panel:hover{
box-shadow: 1px 1px 5px 5px rgba(0, 153, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(0, 153, 255, 0.35);
}
html.theme-dark .panel-small{
box-shadow: 1px 1px 5px 5px rgba(0, 153, 255, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(0, 153, 255, 0.35);
}
html.theme-dark .panel-small:hover{
box-shadow: 1px 1px 5px 5px #0099ff59;
-moz-box-shadow: 1px 1px 5px 5px rgba(0, 153, 255, 0.35);
}
html.theme-dark .app.container {
box-shadow: 0 0 30px rgba(0, 153, 255, 0.35);
}
html.theme-dark ol.page-navigator, html.theme-dark ol.breadcrumb.bg-white-pure, html.theme-dark .pager li>a, html.theme-dark .pager li>span, html.theme-dark .alert-warning.alert-block.box-shadow-wrap-lg {
box-shadow: 0 0 10px 3px rgba(0, 153, 255, 0.35);
}
html.theme-dark figcaption{
box-shadow: 0 0 10px 3px rgba(0, 153, 255, 0.35);
}各个居中/各种修正
/*站点标题/自定义介绍/公告/文章标题居中*/
header.bg-light.lter.wrapper-md {
text-align: center;
}
.alert-warning.alert-block.box-shadow-wrap-lg {
text-align: center;
}
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
.post_title_wrapper {
flex-direction: row;
justify-content: center;
align-items: stretch;
align-content: stretch;
flex-wrap: nowrap;
padding-top: 5px;
padding-bottom: 5px;
}
.panel-no-pic .summary {
display: none;
}
/*去除热门文章信息后离顶部过近的修正*/
.padder-v-none {
padding-top: 20px;
}
/*修正部分文字离标题过近的毛病*/
#post-content p {
margin: 10px 0 20px 0;
}
/*修正卡片文字位置*/
.inner-content {
margin-top: 25px;
}
.inser-title {
display: contents;
}
/*修改模板页面宽度*/
/*两侧框架留白间距*/
@media (min-width:1700px) {
.app.container {
width: 95%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 95%
}
}
@media (min-width:2048px) {
.app.container {
width: 93%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 93%
}
}
@media (min-width:1200px) {
.app.container {
width: 90%
}
.app.container .app-aside,
.app.container .app-header {
max-width: 90%
}
.app.container .app-footer-fixed {
max-width: 970px
}
.app.container.app-aside-folded .app-footer-fixed {
max-width: 1110px
}
.app.container.app-aside-dock .app-footer-fixed {
max-width: 90%
}
}
/*文章页调整标题大小*/
.entry-title { font-size: 26px; }底部分页按钮自定义配色/时光机配色/引入字体
/*底部分页按钮自定义*/
.page-navigator>.current>a, .page-navigator>.current>a:focus, .page-navigator>.current>a:hover, .page-navigator>.current>span, .page-navigator>.current>span:focus, .page-navigator>.current>span:hover {
background-color: #337ab7;
border-color: #337ab7;
}
.page-navigator>li>a, .page-navigator>li>span {
color: #337ab7;
}
/*闲言碎语更新背景色修改*/
span.badge.badge-sm.up.bg-danger.pull-right-xs {
background-color: #337ab7;
}
/*尝试更换字体*/
body {
/* Screen version */
font-family: "Source Han Serif CN for Display", sans-serif;
}