依晨博客-专注于网络资源分享

专注于网络资源分享

基于handsome主题的一些美化教程

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

  • 将以下代码添加至后台主题设置自定义CSS,放大的时间和大小自行修改数值。
/*首页文章图片获取焦点放大1*/
.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);
}
/*首页文章图片获取焦点放大2*/
.index-post-img {
    overflow: hidden;
}

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

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

2、鼠标经过头像转动并放大

  • 将以下代码添加至后台主题设置自定义CSS,转动快慢和头像大小自行修改数值
/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
    }
}

3、底部页脚标签样式
点击查看

  • 将以下代码添加至后台主题设置自定义CSS,转动快慢和头像大小自行修改数值
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
  • 将以下代码添加至后台主题设置博客底部左侧信息,信息修改成自己的
<div class="github-badge">
<a href="./" title="©2019&nbsp;依晨博客">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019&nbsp;依晨博客</span>
</a>
</div>
&nbsp;|&nbsp;
<div class="github-badge">
<a href="http://www.miitbeian.gov.cn/" target="_blank" title="粤ICP备 xxxxx号" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">粤ICP备</span><span class="badge-value bg-green">xxxx号</span>
</a>
</div>
  • 将以下代码添加至后台主题设置博客底部右侧信息
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div>
&nbsp;|&nbsp; 
<div class="github-badge">
<a href="https://www.ihewro.com/archives/489/" target="_blank" title="站点使用 handsome 主题,作者:友人C" style="cursor: url(&quot;/usr/plugins/HoerMouse/static/image/dew/link.cur&quot;), pointer;">
<span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</a>
</div>
  • 添加完成后,需要去handsome——component——footer.php删除原有声明代码,以下为删除完后的效果(大概1~12行)
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <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>
      <!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->

4、复制弹框版权提醒

点击查看

  • 首先将下方代码复制添加至后台主题设置自定义输出head 头部的HTML代码
<!--复制弹框JS-->
<script src="https://www.mgxfd.club/layer/layer.js"></script>
  • 最后复制下方代码添加至后台主题设置自定义 JavaScript即可
<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功,若要转载请务必保留本文链接!');};

5、文章底部赞赏图标跳动

  • 将以下代码添加至后台主题设置自定义CSS
/*赞赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

6、首页文章版式圆角化

本项修改的是首页文章版式,包括图片使其四个角由方形变成圆角形状。将以下代码添加至后台主题设置 自定义CSS。

#圆角大小可修改15px数值(别复制该行)
/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

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

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

7、文章标题居中

  • 本项修改的是文章标题,使其居中。将以下代码添加至后台主题设置 自定义CSS。
/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

8、首页文章版式阴影化

本项修改的是首页文章版式,包括图片使其四周加上一层绚丽的阴影。将以下代码添加至后台主题设置 自定义CSS。

#阴影颜色修改rgba后面的值(别复制该行)
/*panel阴影*/
.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);
}

#如果也想使盒子四周也有阴影,加上以下代码
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
本原创文章未经允许不得转载 | 当前页面:依晨博客-专注于网络资源分享 » 基于handsome主题的一些美化教程

评论 15

  1. 滴!学生卡!打卡时间:下午11:28:52,请上车的乘客系好安全带~

    依晨小哥 2020-01-19    回复
  2. 滴!学生卡!打卡时间:上午8:00:07,请上车的乘客系好安全带~

    依晨小哥 2020-01-20    回复
  3. 滴!学生卡!打卡时间:下午10:18:31,请上车的乘客系好安全带~

    依晨小哥 2020-01-24    回复
  4. 写得好好哟,我要给你生猴子!::funny:04::

    依晨小哥 2020-01-24    回复
  5. 滴!学生卡!打卡时间:上午9:41:10,请上车的乘客系好安全带~

    gordsky 2020-01-27    回复
  6. 吓得我迫不及待想搭一个一模一样的耶,博客个人感觉挺好看的,而且加载速度很快(・◇・),怎么做到的?

    Jn 2020-04-01    回复
    • 如果你嫌网站卡的话可以进行域名备案购买国内服务器或者购买CDN进行加速

      依晨小哥 2020-04-01    回复
  7. 可惜这个模板要钱,博主能分享个免费的吗。。。

    易支付-白嫖党 2020-04-01    回复
    • 对的,这款主题是收费的,如果你想用免费的,可以去typecho模板站找找看

      依晨小哥 2020-04-01    回复
  8. @(a) @(chabei) 支持呀

    明月 2020-04-02    回复
  9. 支持呀。的

    明月 2020-04-02    回复
  10. 支持呀。

    明月 2020-04-02    回复
  11. 支持呀

    明月 2020-04-02    回复
  12. 支持

    明月 2020-04-02    回复
  13. 支持

    明月 2020-04-02    回复