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样式)
1007 0
typora 基本使用和漂亮的主题样式(如何更改typora主题样式 + 如何修改博客园等博客的markdown样式)
|
3月前
|
搜索推荐 程序员
ECHO个人博客主题网页模板
echo个人网站主页源代码 - 适合喜欢极简风、清爽又酷酷的专业程序员风格效果的小伙伴, HTML+CSS+JS纯静态实现
18 1
|
6月前
QQ个性网静态网页模板源码分享
QQ个性网静态网页模板源码分享
225 3
QQ个性网静态网页模板源码分享
|
6月前
|
JavaScript
Hexo个人博客之Next-8.20主题下载及美化
Hexo个人博客之Next-8.20主题下载及美化
Hugo教程#3单页面布局
上集我们学习了如何创建一个index的布局,那么是不是所有的页面都要创建一个布局,那肯定不是的,那样的话实在太麻烦,因为只显对应页面的markdown里面的内容,所以创建一个single.html布局就可以了,所有的页面都可以使用这个布局
84 0
butterfly主题的下载及美化
butterfly主题的下载及美化
199 0
|
前端开发 搜索推荐 开发者
Typecho-handsome主题页脚美化
handsome主题中页脚美化,如下图所示, 可以让主题的页脚更加具有个性化
291 1
Typecho-handsome主题页脚美化
|
PHP
Typecho-handsome主题——时间轴日志模板
本篇文章主要讲述了如何为Typecho中handsome主题添加一个新的独立页面模板——时间轴日志
689 2
Typecho-handsome主题——时间轴日志模板
Typecho-handsome主题如何增加侧边导航栏
handsome主题在使用的过程中导航栏初始时只有首页一个导航页面,本篇文章主要讲解一下应该如何修改源代码增加多个导航栏并且为其设置子导航
269 1
Typecho-handsome主题如何增加侧边导航栏
|
JavaScript 前端开发 开发者
自定义typecho handsome主题标签云颜色
自定义typecho handsome主题标签云颜色
261 0