Handsome 主题大升级（二）CSS

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

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

### 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-f11dbc2621ecba9cc9b85039f26d9f6165" 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-f11dbc2621ecba9cc9b85039f26d9f6165" 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-e8140bfd93a3de10579995ca749e50ce33" 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-e8140bfd93a3de10579995ca749e50ce33" 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-976c439bfbc6bbdb0842df5509b49d283" 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-976c439bfbc6bbdb0842df5509b49d283" 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-08ff896c36ba522f59253a387756d7c481" 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-08ff896c36ba522f59253a387756d7c481" 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-7b434ac7027ad0ad2c2af008c326974f11" 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-7b434ac7027ad0ad2c2af008c326974f11" 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-5b7e777e0d9940c9db94c243bef5717044" 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-5b7e777e0d9940c9db94c243bef5717044" 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-11fccb2233fa8e90cba333c95ae885cd78" 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-11fccb2233fa8e90cba333c95ae885cd78" 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-4dac9bf253ffe1a9bc53f2c6f99b213174" 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-4dac9bf253ffe1a9bc53f2c6f99b213174" 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-2c8486f54aca8122e5772dfa7d3f004328" 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-2c8486f54aca8122e5772dfa7d3f004328" 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-8762b2fa5c89f131af07a3acfb3c187147" 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-8762b2fa5c89f131af07a3acfb3c187147" 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-ca6625cd82e64f5f75183a2d4b2c970895" 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-ca6625cd82e64f5f75183a2d4b2c970895" 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-9f41e0a92912e85026b524039984611890" 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-9f41e0a92912e85026b524039984611890" 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-20d7784cf39190fb006cee7d96f02dcc82" 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-20d7784cf39190fb006cee7d96f02dcc82" 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-517ef97ee482a184f20da007818a6c2075" 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-517ef97ee482a184f20da007818a6c2075" 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-28d96f5c351a315aef78df5501d1d03b94" 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-28d96f5c351a315aef78df5501d1d03b94" 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-a85f1d392158624f3084d7490f6d9b9f3" 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-a85f1d392158624f3084d7490f6d9b9f3" 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-1307e881c11f9142a3672546cb8f71e339" 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-1307e881c11f9142a3672546cb8f71e339" 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-d7d8dcfaf2fd6c064c84938409f032d015" 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-d7d8dcfaf2fd6c064c84938409f032d015" 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-efe20f9240403d14bd92d92d488f174927" 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-efe20f9240403d14bd92d92d488f174927" 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-b9244431c8e863ae33add6bb2899219554" 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-b9244431c8e863ae33add6bb2899219554" 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-f852777c0c41a432943f7d44966400ff68" 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-f852777c0c41a432943f7d44966400ff68" class="collapse collapse-content"><p></p>打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至 自定义CSS即可: