主题介绍
一款简约而不简单精心打磨后的 Typecho
主题,精心搭配和设计的纯白色调,适应各个设备和分辨率,十四种色调、多种布局可以随心切换。
Ihewro-友人C 是 handsome 主题唯一购买方式,其他任何途径、渠道均为非法倒卖主题。
如果你感兴趣可以前往作者博客购买!
如果你感兴趣可以前往作者博客购买!
美化说明
此次要给大家分享的美化教程是我在网上各处收集到的,其中包括CSS、JavaScript、Php等内容的修改或增加,我也不知道具体的作者是谁,如果此文章内容有侵犯你的权益请联系我修改或删除。
这边我也就不一一为大家展示具体美化效果直接给具体代码吧,你可以自己尝试看看效果也可以修改代码让其更符合你的要求。
CSS美化
使用方法:设置外观→开发者设置→自定义CSS
/* 头像呼吸光环和鼠标悬停旋转放大 */
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full:hover {
transform: scale(1.1) rotate(720deg);
}
@keyframes light {
0% {
box-shadow: 0 0 4px #FA7298;
}
25% {
box-shadow: 0 0 16px #FA7298;
}
50% {
box-shadow: 0 0 4px #FA7298;
}
75% {
box-shadow: 0 0 16px #FA7298;
}
100% {
box-shadow: 0 0 4px #FA7298;
}
}
/* 左侧文章图标和评论头像鼠标悬停旋转 */
.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);
}
}
/* 首页文章列表悬停上浮 */
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 3px 5px 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: 8px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
/* 定义滚动条高宽及背景 横竖滚动条的尺寸 */
::-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: #FA7298;
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
}
/* 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;
}
}
JS美化
使用方法:设置外观→开发者设置→自定义JavaScript
注意:如果你的主题开启了Pjax,还需要将 浏览器动态标题、彩色标签栏 的JS代码复制到Pjax回调函数里
/* 鼠标点击特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#FA7298"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
/* 浏览器动态标题 */
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "ico图标地址");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~ ';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "ico图标地址");
document.title = '(ฅ>ω<*ฅ) 咦又好了呀 ~ ' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
/* 彩色标签栏 */
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
};
};
/* 复制成功提示代码 */
kaygb_copy();function kaygb_copy(){$(document).ready(function(){$("body").bind('copy',function(e){hellolayer()})});var sitesurl=window.location.href;function hellolayer(){
$.message({
message: "尊重原创,转载请注明出处!<br> 本文作者:艾尤克<br>"+sitesurl,
title: "复制成功",
type: "warning",
autoHide: !1,
time: "3000"
});
}};
其它说明
以上只简单给大家分享了一下我认为比较好的美化代码,有些根据自己喜好也做了相应的修改,
另外再分享一些大佬整理的关于handsome美化的文档合集。