Handsome 主题大升级（二）CSS

博主： demius
发布时间：2024 年 10 月 14 日
318 次浏览
2 条评论
15752字数
分类： typecho

主题整体细节设置以及美化方案

Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处

自定义CSS

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内

页面两侧框架留白间距

将页面扩大化了，看原版：

请输入图片描述

修改后：

请输入图片描述

代码：


/*两侧框架留白间距*/
@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%
    }
}

文章标题居中


/*文章标题居中*/
  header.bg-light.lter.wrapper-md {
  text-align: center;
}

首页标题文字居中


/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
  text-align:center !important;
}

左上角博客LOGO/博客名称的扫光效果


/* 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;}}

左上角博主信息羽毛背景

background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）：


/* 羽毛_css */
.dropdown.wrapper {
background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}

鼠标路过头像时放大并旋转


/* 鼠标经过头像旋转放大 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.img-circle:hover {
    transform: scale(1.15) rotate(720deg);
}

@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;
    }
}

头像呼吸光环和鼠标悬停旋转放大


.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 #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;
    }
}

如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：


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

to {
    box-shadow: 0 0 16px #f00;
    }
}

时光机内圆形头像

将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)：


/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}

网站右侧滚动条样式

此处的 #949494;即为滚动条的颜色，你可以去 http://tools.jb51.net/static/colorpicker/ 这个链接去找到你喜欢的颜色然后替换
注意：替换的是 #后面的 6位数字，#不要动


/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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: #949494;
    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
}

首页文章图片获取焦点放大


/* 首页文章图片获取焦点放大 */
.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);
}

首页头图悬停放大并超出范围


.index-post-img {
 overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

首页文章添加圆角效果


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

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

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

博客头图阴影眼睛


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异次元鼠标经过文章Banner效果</title>
</head>
<style>
.entry-banner {background: #f4f4f4;width: 680px;height: 130px;clear: both;position: relative;display: block;border-radius: 8px;overflow: hidden}
.entry-banner a {border-radius: 8px;display: inline-block;width: 681px;height: 130px}
.entry-banner a img {-webkit-transition: all .2s;-moz-transition: all .2s;-ms-transition: all .2s;transition: all .2s}
.entry-banner a:before {position: absolute;top: 0;left: 0;z-index: 2;visibility: hidden;border-radius: 8px;width: 100%;height: 100%;background: #026dd4;content: '';opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:after {position: absolute;top: 0;left: 0;z-index: 5;margin-top: 0;visibility: hidden;content: "";background-image: url(https://s2.ax1x.com/2019/06/11/VcwS8f.png);background-repeat: no-repeat;background-size: 101px 63px;background-position: center center;height: 130px;width: 100%;opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:hover:before {visibility: visible;opacity: .75;-ms-filter: "alpha(opacity=75)"}
.entry-banner a:hover:after {visibility: visible;opacity: 1;-ms-filter: "alpha(opacity=100)"}
.entry-banner a:hover img {-webkit-transform: scale(1.08);-moz-transform: scale(1.08);transform: scale(1.08)}
</style>
<body>
  <div class="entry-banner">
   <a href="#">
           <img border="0" width="680" height="130" src="https://img.iplaysoft.com/wp-content/uploads/2018/618-apps-sale/618_2019_banner.jpg" />
       </a>
  </div>
</body>
</html>

注意：这个效果本博还没测试过，蛮好玩的这里先收录一下了。

文章内头图和图片悬停放大并超出范围


.entry-thumbnail {
overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

修改h1，h2标题背景颜色


/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}

文章一二三四级标题美化


/*文章一二三四级标题美化 开始*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#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:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;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}
/*文章一二三四级标题美化 结束*/

文章版式阴影化

可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。所有 rgba后面的，如 26, 169, 255都可以进行修改，它代表的是散发出来的颜色类型。你同样可以去 [http://tools.jb51.net/static/colorpicker/]([在线颜色选择器 | RGB颜色查询对照表 (jb51.net)](https://tools.jb51.net/static/colorpicker/) 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\~：


/* 首页文章版式阴影颜色 */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

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

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

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

.app.container {
    box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}

右侧列表导航栏图标颜色

这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。同样 #后面的六位数字代表颜色，可以改\~


/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}

文章列表悬停上浮

首页文章列表悬停上浮


/*首页文章列表悬停上浮*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article), .panel-picture {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover, .panel-picture:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}


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

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

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

.border-radius-6 {
border-radius: 15px;
}

这段可能还需要改进，在目前这个主题版本中测试没有生效。

赞赏按钮跳动


/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
    transform: scale(1.1);
}
}

页面两侧框架留白间距

打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可:


/*两侧框架留白间距*/
@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%
    }
}

评论边框


/*评论边框*/
.comment-parent {
margin: 20px;
padding: 20px;
border-radius: 25px;
border: 1px solid rgba(255,255,255,.3);
}

底栏高度设置


<!--底栏高度开始-->
.wrapper {
    padding: 10px
}
<!--底栏高度结束-->

粗斜体上色


/* 粗斜体上色 */
strong{
color: #f26522;
}
em{
font-style: normal;
color: #fcaf17;
}

开启全站变灰（黑白模式）


这里编辑收缩框内容<!--开启黑白模式-->
html {-webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}
html { filter:progidXImageTransform.Microsoft.BasicImage(grayscale=1); }
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}
<!--黑白模式结束-->

手机端不显示热门文章和标签云


/*手机不显示*/
@media (max-width:767px) {
    #tabs-4,#tag_cloud-2 {
        display: none;
    }
}

添加至后台 主题设置-开发者设置-自定义CSS：


/* 海浪背景CSS部分 */
#wavesDIV{position: fixed;bottom: 0;width: 100%;display:block;height:20vh;background-color:rgb(125,165,191);animation: move-out 2s cubic-bezier(0,.98,.97,1) forwards;}
.waves { position:relative; width: 100%; height:15vh; margin-top:-15vh; min-height:100px; max-height:150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite; } 
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } 
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } 
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } 
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } 
@keyframes move-forever { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } }
@keyframes move-out { 0% { transform: translateY(400%); } 100% { transform: translateY(0%); } }

添加至后台 主题设置-开发者设置-自定义输出head 头部的HTML代码：


<!-- 海浪背景 -->
<div id="wavesDIV" style="display: block;">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
            <defs>
                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path>
            </defs>
            <g class="parallax">
                <use xlink:href="#gentle-wave" x="48" y="-2" fill="rgba(125,165,191,0.3)"></use>
                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(125,165,191,0.5)"></use>
                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(125,165,191,0.7)"></use>
                <use xlink:href="#gentle-wave" x="48" y="12" fill="rgba(125,165,191,1)"></use>
            </g>
        </svg>
    </div>

## 主题整体细节设置以及美化方案

### Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处

#### 自定义CSS

该修改项位于Handsome主题后台-外观-设置外观-开发者设置-自定义CSS处
部分提到PJAX回调的部分添加到主题后台-外观-外观设置-PJAX-PJAX回调函数内

##### 页面两侧框架留白间距

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3ffcfe2104f3554ef7eadd5dbad079b788" aria-expanded="true"><div class="accordion-toggle"><span style="">页面两侧框架留白间距</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3ffcfe2104f3554ef7eadd5dbad079b788" class="collapse collapse-content"><p></p>

将页面扩大化了，看原版：

![请输入图片描述](https://tc.demius.tech/i/2024/09/11/66e12838bc4b9.webp)

修改后：

![请输入图片描述](https://tc.demius.tech/i/2024/09/11/66e12838c7644.webp)

代码：

```
/*两侧框架留白间距*/
@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%
    }
}
```

##### 文章标题居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ecd947827b97a80911a790c83c81ac7c64" aria-expanded="true"><div class="accordion-toggle"><span style="">文章标题居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ecd947827b97a80911a790c83c81ac7c64" class="collapse collapse-content"><p></p>

```
/*文章标题居中*/
  header.bg-light.lter.wrapper-md {
  text-align: center;
}
```

##### 首页标题文字居中

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a56d2f2922bac83f4d679e2f3e8905e495" aria-expanded="true"><div class="accordion-toggle"><span style="">首页标题文字居中</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a56d2f2922bac83f4d679e2f3e8905e495" class="collapse collapse-content"><p></p>

```
/*首页标题文字居中*/
.m-t-none.text-ellipsis.index-post-title.text-title
{
  text-align:center !important;
}
```

##### 左上角博客LOGO/博客名称的扫光效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f7cf206445cea4e13ac4e462a17f89be85" aria-expanded="true"><div class="accordion-toggle"><span style="">左上角博客LOGO/博客名称的扫光效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f7cf206445cea4e13ac4e462a17f89be85" class="collapse collapse-content"><p></p>

```
/* 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;}}
```

##### 左上角博主信息羽毛背景

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c288205ce72b670bc0b84fae46628e8680" aria-expanded="true"><div class="accordion-toggle"><span style="">左上角博主信息羽毛背景</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c288205ce72b670bc0b84fae46628e8680" class="collapse collapse-content"><p></p>background:url后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）：

```
/* 羽毛_css */
.dropdown.wrapper {
background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
}
```

![](https://imgs.demius.tech//imgs/2024/08/202408262348317.webp)

##### 鼠标路过头像时放大并旋转

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-052f47a8f3c6157a49078e7d1080390377" aria-expanded="true"><div class="accordion-toggle"><span style="">鼠标路过头像时放大并旋转</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-052f47a8f3c6157a49078e7d1080390377" class="collapse collapse-content"><p></p>

```
/* 鼠标经过头像旋转放大 */
.img-circle {
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: all 0.5s;
}
.img-circle:hover {
    transform: scale(1.15) rotate(720deg);
}

@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;
    }
}
```

##### 头像呼吸光环和鼠标悬停旋转放大

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ee37c382eb96e373392a10e8553739f920" aria-expanded="true"><div class="accordion-toggle"><span style="">头像呼吸光环和鼠标悬停旋转放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ee37c382eb96e373392a10e8553739f920" class="collapse collapse-content"><p></p>

```
.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 #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;
    }
}
```

`如果只需要单色呼吸光环，例如红色，可以将关键帧动画改为：`

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

to {
    box-shadow: 0 0 16px #f00;
    }
}
```

##### 时光机内圆形头像

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8cd134e3d963ba2aa8777ef2d65bea0d89" aria-expanded="true"><div class="accordion-toggle"><span style="">时光机内圆形头像</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8cd134e3d963ba2aa8777ef2d65bea0d89" class="collapse collapse-content"><p></p>

将独立页面-时光机里的头像都更改为圆形(原版是方形圆角样式)：

```
/* 时光机圆形头像 */
.img-square {border-radius: 50%;}
.list-group-item .thumb-sm .img-square {border-radius: 5px;}
```

##### 网站右侧滚动条样式

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f4d0c6ab395010a809a46eef4ca2faf626" aria-expanded="true"><div class="accordion-toggle"><span style="">网站右侧滚动条样式</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-f4d0c6ab395010a809a46eef4ca2faf626" class="collapse collapse-content"><p></p>

此处的 `#949494;`即为滚动条的颜色，你可以去 `http://tools.jb51.net/static/colorpicker/ `这个链接去找到你喜欢的颜色然后替换
注意：替换的是 `#`后面的 `6`位数字，`#`不要动

```
/* 美化网站右侧滚动条样式 */
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
::-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: #949494;
    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
}
```

##### 首页文章图片获取焦点放大

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-82516b6c245598478688712d189c8bac25" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章图片获取焦点放大</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-82516b6c245598478688712d189c8bac25" class="collapse collapse-content"><p></p>

```
/* 首页文章图片获取焦点放大 */
.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);
}
```

##### 首页头图悬停放大并超出范围

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-46a6fb7a70b37d81d0797f34c85625dd87" aria-expanded="true"><div class="accordion-toggle"><span style="">首页头图悬停放大并超出范围</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-46a6fb7a70b37d81d0797f34c85625dd87" class="collapse collapse-content"><p></p>

```
.index-post-img {
 overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}
```

##### 首页文章添加圆角效果

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-122d5a15af2e532fba2d08d5244f1d1781" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章添加圆角效果</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-122d5a15af2e532fba2d08d5244f1d1781" class="collapse collapse-content"><p></p>

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

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

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

##### 博客头图阴影眼睛

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-4bf83042c1acc45fadd0a6153577718873" aria-expanded="true"><div class="accordion-toggle"><span style="">博客头图阴影眼睛</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-4bf83042c1acc45fadd0a6153577718873" class="collapse collapse-content"><p></p>

```
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异次元鼠标经过文章Banner效果</title>
</head>
<style>
.entry-banner {background: #f4f4f4;width: 680px;height: 130px;clear: both;position: relative;display: block;border-radius: 8px;overflow: hidden}
.entry-banner a {border-radius: 8px;display: inline-block;width: 681px;height: 130px}
.entry-banner a img {-webkit-transition: all .2s;-moz-transition: all .2s;-ms-transition: all .2s;transition: all .2s}
.entry-banner a:before {position: absolute;top: 0;left: 0;z-index: 2;visibility: hidden;border-radius: 8px;width: 100%;height: 100%;background: #026dd4;content: '';opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:after {position: absolute;top: 0;left: 0;z-index: 5;margin-top: 0;visibility: hidden;content: "";background-image: url(https://s2.ax1x.com/2019/06/11/VcwS8f.png);background-repeat: no-repeat;background-size: 101px 63px;background-position: center center;height: 130px;width: 100%;opacity: 0;-ms-filter: "alpha(opacity=0)";-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transition: all .4s}
.entry-banner a:hover:before {visibility: visible;opacity: .75;-ms-filter: "alpha(opacity=75)"}
.entry-banner a:hover:after {visibility: visible;opacity: 1;-ms-filter: "alpha(opacity=100)"}
.entry-banner a:hover img {-webkit-transform: scale(1.08);-moz-transform: scale(1.08);transform: scale(1.08)}
</style>
<body>
  <div class="entry-banner">
   <a href="#">
           <img border="0" width="680" height="130" src="https://img.iplaysoft.com/wp-content/uploads/2018/618-apps-sale/618_2019_banner.jpg" />
       </a>
  </div>
</body>
</html>
```

注意：这个效果本博还没测试过，蛮好玩的这里先收录一下了。

##### 文章内头图和图片悬停放大并超出范围

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7b04ba16d2e841ca1642f2d2dd886b8a8" aria-expanded="true"><div class="accordion-toggle"><span style="">文章内头图和图片悬停放大并超出范围</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-7b04ba16d2e841ca1642f2d2dd886b8a8" class="collapse collapse-content"><p></p>

```
.entry-thumbnail {
overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}
```

##### 修改h1，h2标题背景颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-2729bc617eccb1198b7568cedf7e48f11" aria-expanded="true"><div class="accordion-toggle"><span style="">修改h1，h2标题背景颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-2729bc617eccb1198b7568cedf7e48f11" class="collapse collapse-content"><p></p>

```
/*文章页h标签背景颜色修改*/
#post-content h1, #post-content h2 {
background : linear-gradient(to bottom,transparent 60%,rgba(0,191,255,.3) 0) no-repeat
}
```

##### 文章一二三四级标题美化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c3fd527ee182349c5315816a4e0d3bde57" aria-expanded="true"><div class="accordion-toggle"><span style="">文章一二三四级标题美化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c3fd527ee182349c5315816a4e0d3bde57" class="collapse collapse-content"><p></p>

```
/*文章一二三四级标题美化 开始*/
#post-content h1 {font-size: 30px}
#post-content h2 {position: relative;margin: 36px 0 20px!important;font-size: 1.55em;display: inline-block;}
#post-content h3 {font-size: 20px}
#post-content h4 {font-size: 15px}
#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:-8px;}
#post-content h2::before {content:"";width:100%;border-bottom:1px solid #eee;bottom:-7px;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}
/*文章一二三四级标题美化 结束*/
```

##### 文章版式阴影化

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-45495c8642373c785b15e91b89c75afc21" aria-expanded="true"><div class="accordion-toggle"><span style="">文章版式阴影化</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-45495c8642373c785b15e91b89c75afc21" class="collapse collapse-content"><p></p>可能这个项目看名称比较晦涩，其实就是你现在看到的各个边框散发的蓝(色的)光效果。
所有 rgba后面的，如 26, 169, 255都可以进行修改，它代表的是散发出来的颜色类型。
你同样可以去 [http://tools.jb51.net/static/colorpicker/]([在线颜色选择器 | RGB颜色查询对照表 (jb51.net)](https://tools.jb51.net/static/colorpicker/) 这个网站去选自己喜欢的颜色，但更改的时候一定注意"标点"，不要出现类似少逗号的问题哦\~：

```
/* 首页文章版式阴影颜色 */
.panel{
   box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(26, 169, 255, 0.35);
}

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

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

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

.app.container {
    box-shadow: 0 0 30px rgba(26, 169, 255, 0.35);
}
```

##### 右侧列表导航栏图标颜色

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e9d394b423c23981602c2e301962bb8742" aria-expanded="true"><div class="accordion-toggle"><span style="">右侧列表导航栏图标颜色</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e9d394b423c23981602c2e301962bb8742" class="collapse collapse-content"><p></p>这一项是更改右上方三个图标(大拇指，信息，礼物)的颜色，默认是白色。同样 #后面的六位数字代表颜色，可以改\~

```
/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}

#post-content pre code {
    display:block;
    overflow-x:auto;
    position:relative;
    margin:0;
    padding-left:50px;
}
pre code {
    position:relative;
    display:block;
    overflow-x:auto;
    margin:4.4px 0.px .4px 1px;
    padding:0;
    max-height:500px;
    padding-left:3.5em
}

.img-square {
    transition: all 0.3s;
}

.img-square:hover {
    transform: rotate(360deg);
}

.glyphicon-fire {
    color: #ff0000;
}

.nav-tabs-alt .glyphicon-comment {
    color: #495dc3;
}

.glyphicon-transfer {
    color: #0e5458;
}
```

##### 文章列表悬停上浮

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-cf317e04fcd3e2ec03714c7584ecb64b57" aria-expanded="true"><div class="accordion-toggle"><span style="">首页文章列表悬停上浮</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-cf317e04fcd3e2ec03714c7584ecb64b57" class="collapse collapse-content"><p></p>

```
/*首页文章列表悬停上浮*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article), .panel-picture {
    transition: all 0.3s;
}

.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover, .panel-picture:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

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

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

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

.border-radius-6 {
border-radius: 15px;
}
```

这段可能还需要改进，在目前这个主题版本中测试没有生效。

##### 赞赏按钮跳动

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9157a98db9bb2a9277811a96ac883b4541" aria-expanded="true"><div class="accordion-toggle"><span style="">赞赏按钮跳动</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-9157a98db9bb2a9277811a96ac883b4541" class="collapse collapse-content"><p></p>

```
/*赞赏按钮跳动*/
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}

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

to {
    transform: scale(1.1);
}
}
```

##### 页面两侧框架留白间距

<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ec9e073d02551871a5ec946cedce8b9544" aria-expanded="true"><div class="accordion-toggle"><span style="">页面两侧框架留白间距</span>
<i class="pull-right fontello icon-fw fontello-angle-right"></i>
</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ec9e073d02551871a5ec946cedce8b9544" class="collapse collapse-content"><p></p>打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义CSS即可: