Typecho-handsome主题美化

简介: 本篇文章主要介绍一下handsome主题的美化教程

本篇文章主要介绍一下handsome主题的美化教程


首页标题居中

  • 主题设置——开发者设置——自定义CSS
/*主题标题居中开始*/
 header.bg-light.lter.wrapper-md {
     text-align: center;
 }
 /*主题标题居中结束*/

多彩标签云

  • 主题设置——PJAX——PJAX回调函数
  • 主题设置——开发者设置——自定义JS
let tags = document.querySelectorAll("#tag_cloud-2 a");
let infos = document.querySelectorAll(".badge");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    tag.style.backgroundColor = tagsColor;
});
infos.forEach(info => {
    infosColor = colorArr[Math.floor(Math.random() * colorArr.length)];
    info.style.backgroundColor = infosColor;
});
function addNumber(a) {
    var length = document.getElementById("comment").value.length;
    if(length> 0){
        document.getElementById("comment").focus()
        document.getElementById("comment").value += '\n' + a + new Date
    }else{
        document.getElementById("comment").focus()
        document.getElementById("comment").value += a + new Date
    }
}

赞赏按钮跳动

  • 主题设置——开发者设置——自定义CSS
/*赞赏按钮跳动开始*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1);
    }
}
/*赞赏按钮跳动结束*/

滑动条美化

  • 主题设置——开发者设置——自定义CSS
/*定义滚动条高宽及背景 横竖滚动条的尺寸开始*/ 
::-webkit-scrollbar {
    width: 8px;
    height: 6px  
}
/*定义滚动条高宽及背景 横竖滚动条的尺寸结束*/ 
/*定义滚动条轨道开始*/ 
::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滚动条轨结束*/ 
/*定义滑块 内阴影+圆角*/ 
::-webkit-scrollbar-thumb {
    background-color: #FFC0CB;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em
}
/*定义滑块 内阴影+圆角结束*/

复制右上角显示版权

  • 主题设置——开发者设置——自定义JS
/* 复制成功提示代码开始 */ 
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
    message: "尊重原创,转载请注明出处!<br> 本文作者:xxx<br>原文链接:"+sitesurl,
    title: "复制成功",
    type: "warning",
    autoHide: !1,
    time: "3000"
    })
}}
/* 复制成功提示代码结束 */

LOGO美化 扫光效果

  • 主题设置——开发者设置——自定义CSS
/* logo扫光开始 */
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/*logo扫光结束*/

头像转动并放大

  • 主题设置——开发者设置——自定义CSS
/*头像转动放大开始*/
**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**
}
/*头像转动放大结束*/

头像呼吸光环

  • 主题设置——开发者设置——自定义CSS
/*头像呼吸光环开始*/
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**;
    }
}
/*头像呼吸光环结束*/

首页文章阴影版式化

  • 主题设置——开发者设置——自定义CSS
/*文章板式阴影化开始*/
**.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);
}
/*文章板式阴影化结束*/

首页文章圆角版式化

  • 主题设置——开发者设置——自定义CSS
/*首页文章板式园角化开始*/
**.panel**{
    **border**: none;
    **border-radius**: **15px**;
}
**.panel-small**{
    **border**: none;
    **border-radius**: **15px**;
}
**.item-thumb**{
    **border-radius**: **15px**;  
}
/*首页文章板式园角化结束*/
目录
相关文章
|
搜索推荐 前端开发 开发者
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
1028 0
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
|
4月前
|
搜索推荐 程序员
ECHO个人博客主题网页模板
echo个人网站主页源代码 - 适合喜欢极简风、清爽又酷酷的专业程序员风格效果的小伙伴, HTML+CSS+JS纯静态实现
36 1
|
7月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
butterfly主题的下载及美化
butterfly主题的下载及美化
220 0
|
前端开发 搜索推荐 开发者
Typecho-handsome主题页脚美化
handsome主题中页脚美化,如下图所示, 可以让主题的页脚更加具有个性化
309 1
Typecho-handsome主题页脚美化
|
PHP
Typecho-handsome主题——时间轴日志模板
本篇文章主要讲述了如何为Typecho中handsome主题添加一个新的独立页面模板——时间轴日志
720 2
Typecho-handsome主题——时间轴日志模板
Typecho-handsome主题如何增加侧边导航栏
handsome主题在使用的过程中导航栏初始时只有首页一个导航页面,本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航
292 1
Typecho-handsome主题如何增加侧边导航栏
|
前端开发
【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont
Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢?可以使用阿里巴巴iconfont来拓展啦,今天教大家在Hexo中使用阿里巴巴iconfont矢量图标库。
586 0
|
前端开发
Typecho打赏功能
最近逛了好多博客,发现大家的文章底下都有一个共同特点 文章页面底下都有一个打赏(要饭)的按钮 回到我的博客一看发现没有,这可不得行 于是我也整了一个,顺便分享给大家
112 0
Typecho打赏功能