主题美化

此文章基于 Typecho + HandSome 主题美化,感谢所有提供美化代码帮助的博主


CSS美化

以下代码填写路径:后台-->外观-->设置外观-->开发者设置-->自定义CSS


首页文章移动上浮

点击查看

/*首页文章移动上浮*/
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

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


首页文章版式圆角化

点击查看

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

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

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


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

点击查看

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


首页头像转动并放大

点击查看

/*首页头像自动旋转*/
.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
}


首页头像放大并自动旋转

点击查看

/*首页头像放大并自动旋转*/
.thumb-lg{
    width:130px;
}

@-webkit-keyframes rotation{
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.img-full{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}


文章标题居中

点击查看

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}


首页文章版式阴影化(颜色为浅蓝色,可以自行修改)

点击查看

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(100,149,237, 0.35);
}

/*四周盒子阴影*/
.app.container {
    box-shadow: 0 0 30px rgba(100,149,237, 0.35);
}


打赏图标跳动

点击查看

/*打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}


自定义滚动条滑块

点击查看

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}


杂类美化

以下皆是选择性自定义美化部分


评论框特效

点击查看

评论框特效

  • 下载特效JS文件:commentTyping.js,将其放在网站根目录,然后编辑主题文件handsome/component/footer.php,在</body>后面添加以下代码。
<script type="text/javascript" src="/commentTyping.js"></script>


底部版权

点击查看

底部版权美化

  • 将下面代码复制到:设置--》开发者设置--》博客底部左侧信息
<!-- 左侧底部 -->
<div class="github-badge">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">Powered by <a href="https://www.baicho.cn/">Baicho</a></span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://beian.miit.gov.cn" target="_blank"  rel="external nofollow" title="沪ICP备20002101号-4">
<span class="badge-subject"><img src="https://i.gordsky.cn/beianicon.png" height="11">沪ICP备</span><span class="badge-value bg-green">20002101号-4</span>
</a>
</div>
  • 将下面代码复制到:设置--》开发者设置--》博客底部右侧信息
<!-- 右侧底部 -->
    <span class="pull-right hidden-xs text-ellipsis">
        <div class="github-badge">
            <a rel="license" href="https://www.ihewro.com/archives/489/" target="_blank" title="Theme By Handsome">
            <span class="badge-subject">Theme</span>
            <span class="badge-value bg-purple">Handsome</span></a>
        </div>
      </span>
<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"  target="_blank" style="height:52.4px;"><img src="https://img.baicho8.com/2020/02/26/885be4ced1901.png"></img></a>
  • 修改路径:usr->theme->handsome->component->footer.php
<!--主题版权美化-->
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo();?>
      </span>
      <span class="text-ellipsis">
      <?php $this->options->BottomleftInfo(); ?>
      </span>
    </div>
<!--主题版权美化-->

Last modification:March 31st, 2020 at 11:34 pm
欢迎各位仙女老爷们随意打赏,谢谢!