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**;  
}
/*首页文章板式园角化结束*/
目录
相关文章
|
数据可视化 PyTorch 算法框架/工具
“零一万物”Yi系列魔搭最佳实践教程来了!
11 月 6 日,李开复博士带队创办的AI2.0公司零一万物正式开源发布首款预训练大模型 Yi-34B,模型开放商用申请,已在阿里云魔搭社区ModelScope首发。魔搭第一时间推出了模型部署相关教程,供开发者参考并快速上手。
|
存储 虚拟化 Windows
ESXI8.0安装Windows11
HKEY_LOCAL_MACHINE\SYSTEM\Setup 创建一个名为“LabConfig”的项,在“LabConfig”下创建两个32位DWORD值: 键为“BypassTPMCheck”,值为“00000001” 键为“BypassSecureBootCheck”,值为“00000001” 在安装 Windows 11 进入到以下阶段即“现在安装”按 Shift+F10 进入到命令提示符,添加注册表键值绕过 TPM 检查;如果你是从微软官方下载的 ISO 镜像则在提示需要输入密钥阶段进入到命令提示符;之后就可以正常安装了。 REG ADD HKLM\SYSTEM\Setu
8784 0
ESXI8.0安装Windows11
|
弹性计算 负载均衡 对象存储
手把手教你白嫖阿里云服务器(免费领服务器)
手把手教你白嫖阿里云服务器(免费领服务器)阿里云免费服务器领取,个人和企业用户均可以申请,个人免费服务器1核2GB 每月750小时,企业u1服务器2核8GB免费使用3个月,阿里云百科分享阿里云免费服务器申请入口、个人和企业免费配置、申请资格条件及云服务器免费使用时长
1191 0
|
存储 API Docker
只需10分钟!就能用Flask,Docker和Jenkins部署机器学习模型
一杯茶的功夫部署完成机器学习模型!
3628 1
|
程序员 Linux Docker
使用Docker本地安装部署Drawio绘图工具并实现公网访问
使用Docker本地安装部署Drawio绘图工具并实现公网访问
1065 0
|
11月前
|
监控 网络协议 网络架构
OSPF的DR/BDR选举机制:原理与应用
OSPF的DR/BDR选举机制:原理与应用
1826 4
|
JavaScript 前端开发 数据安全/隐私保护
JavaScript实现MD5 加密的6中方式
JavaScript实现MD5 加密的6中方式
513 0
|
Linux Shell 调度
linux服务器定时执行python程序
linux服务器定时执行python程序
1681 0