Handsome主题介绍 + 美化样式

前言
Handsome主题

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

介绍
博主使用Handsome主题已有一段时间，这款主题论售后还是更新都很好，而且也主题本身也不贵。
如果你是小白或者第一次使用这个模板，那一定要仔细看好了作者写的使用文档
本文博主整理了几种美化样式，希望有喜欢的~

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

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

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

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

@keyframes light {

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

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

}
CSSCopy

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

.img-square {

transition: all 0.3s;

}

.img-square:hover {

transform: rotate(360deg);

}
CSSCopy

1. 文章内打赏图标跳动

.btn-pay {

animation: star 0.5s ease-in-out infinite alternate;

}

@keyframes star {

from {
    transform: scale(1);
}

to {
    transform: scale(1.1);
}

}
CSSCopy

1. 彩色标签云

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

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;

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

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

.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);

}
CSSCopy

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

.index-post-img {

overflow: hidden;

}

.item-thumb {

transition: all 0.3s;

}

.item-thumb:hover {

transform: scale(1.1)

}
CSSCopy

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

.entry-thumbnail {

overflow: hidden;

}

post-content img {

border-radius: 10px;
transition: 0.5s;

}

post-content img:hover {

transform: scale(1.05);

}
CSSCopy

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

.glyphicon-fire {

color: #ff0000;

}

.nav-tabs-alt .glyphicon-comment {

color: #495dc3;

}

.glyphicon-transfer {

color: #0e5458;

}
CSSCopy

1. Mac代码高亮插件

```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
```
删除上边代码中的\
PHPCopy
本人所写的一款插件，希望大家多多支持
Typecho代码高亮插件Code Prettify

基于prismjs的代码语法高亮typecho插件，支持众多常见的代码语言高亮显示，共提供11种代码高亮风格自由切...

1. 悬挂猫咪置顶插件

以上大部分魔改样式来自Zhutougg，感谢这位友人，每样魔改样式都给出相应的效果图
版权属于：Xcnte' s Blog（除特别注明外）

本文链接：https://www.xcnte.com/archives/710/

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