前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Handsome主题介绍 + 美化样式

Handsome主题介绍 + 美化样式

作者头像
Xcnte
发布2021-12-14 10:54:28
2.7K0
发布2021-12-14 10:54:28
举报
文章被收录于专栏:Blog记录Blog记录

前言

Handsome主题

在复杂中,保持简洁。 一款精心打磨后的typecho主题

介绍

博主使用Handsome主题已有一段时间,这款主题论售后还是更新都很好,而且也主题本身也不贵。

如果你是小白或者第一次使用这个模板,那一定要仔细看好了作者写的使用文档

本文博主整理了几种美化样式,希望有喜欢的~

主题购买

主题介绍

使用文档

组件图标

魔改

为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。

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

代码语言:javascript
复制
.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;
    }
}

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

代码语言:javascript
复制
@keyframes light {
    from {
        box-shadow: 0 0 4px #f00;
    }

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

2. 左侧文章图标和评论头像鼠标悬停旋转

代码语言:javascript
复制
.img-square {
    transition: all 0.3s;
}

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

3. 文章内打赏图标跳动

代码语言:javascript
复制
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

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

    to {
        transform: scale(1.1);
    }
}

4. 彩色标签云

之前看过一个彩色标签云的插件,这里用js为标签随机添加上预先定义的颜色,每次刷新都会进行换色:

代码语言:javascript
复制
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});

如果主题中启用了pjax,还需要将上面代码添加到pjax回调函数中

5. 首页文章列表悬停上浮

代码语言:javascript
复制
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

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

6. 首页文章列表头图悬停放大并将超出范围隐藏

代码语言:javascript
复制
.index-post-img {
    overflow: hidden;
}

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

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

7. 文章内头图和文章图片悬停放大并将超出范围隐藏

代码语言:javascript
复制
.entry-thumbnail {
    overflow: hidden;
}

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

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

8. 右侧列表导航栏图标颜色

代码语言:javascript
复制
.glyphicon-fire {
    color: #ff0000;
}

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

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

9. Mac代码高亮插件

代码语言:javascript
复制
\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\

本人所写的一款插件,希望大家多多支持

Typecho代码高亮插件Code Prettify

起始最初基于 Highlight 插件,写一款名为 ColorHighlight插件但因为插件本身存在不少BUG,...

10. 悬挂猫咪置顶插件

插件地址

以上大部分魔改样式来自Zhutougg,感谢这位友人,每样魔改样式都给出相应的效果图

版权属于:Xcnte' s Blog(除特别注明外)

本文链接:https://cloud.tencent.com/developer/article/1918378

本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 介绍
  • 魔改
    • 1. 头像呼吸光环和鼠标悬停旋转放大
      • 2. 左侧文章图标和评论头像鼠标悬停旋转
        • 3. 文章内打赏图标跳动
          • 4. 彩色标签云
            • 5. 首页文章列表悬停上浮
              • 6. 首页文章列表头图悬停放大并将超出范围隐藏
                • 7. 文章内头图和文章图片悬停放大并将超出范围隐藏
                  • 8. 右侧列表导航栏图标颜色
                    • 9. Mac代码高亮插件
                      • 10. 悬挂猫咪置顶插件
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档