Handsome
主题
在复杂中,保持简洁。 一款精心打磨后的typecho
主题
博主使用Handsome主题已有一段时间,这款主题论售后还是更新都很好,而且也主题本身也不贵。
如果你是小白或者第一次使用这个模板,那一定要仔细看好了作者写的使用文档
本文博主整理了几种美化样式,希望有喜欢的~
为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置-自定义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;
}
}
如果只需要单色呼吸光环,例如红色,可以将关键帧动画改为:
@keyframes light {
from {
box-shadow: 0 0 4px #f00;
}
to {
box-shadow: 0 0 16px #f00;
}
}
.img-square {
transition: all 0.3s;
}
.img-square:hover {
transform: rotate(360deg);
}
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.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;
});
如果主题中启用了pjax,还需要将上面代码添加到pjax
回调函数中
.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);
}
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
\```php(语言类型选填)
<?php echo 'hello jrotty!'; ?>
\```
删除上边代码中的\
本人所写的一款插件,希望大家多多支持
起始最初基于 Highlight 插件,写一款名为 ColorHighlight插件但因为插件本身存在不少BUG,...
以上大部分魔改样式来自Zhutougg,感谢这位友人,每样魔改样式都给出相应的效果图
版权属于:Xcnte' s Blog(除特别注明外)
本文链接:https://cloud.tencent.com/developer/article/1918378
本站文章采用 知识共享署名4.0 国际许可协议 进行许可,请在转载时注明出处及本声明!