用了handsome主题有一段时间了,今天对主题进行了一些修改,修改完成后几乎看不出主题被修改了,因为只是添加了一些鼠标悬停样式,感觉白忙活了。
handsome主题介绍:
handsome主题购买地址:
开发者设置
-自定义css
中添加代码即可。
1. 头像呼吸光环和鼠标悬停旋转放大
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.vertical-avatar img: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;
}
}
2. 左侧文章图标和评论头像圆角化鼠标悬停旋转
.img-square {
transition: all 0.3s;
border-radius: 50%;
}
.img-square:hover {
transform: rotate(360deg);
}
3. 文章内打赏图标跳动
.btn-pay {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
4. 彩色标签云
之前看过一个彩色标签云的插件,这里用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
-pjax回调函数
中。
5. 首页文章列表悬停上浮
.blog-post .panel-small:not(article),
.blog-post .panel:not(article) {
transition: all 0.3s;
}
.blog-post .panel-small:not(article):hover,
.blog-post .panel:not(article):hover {
transform: translateY(-10px);
box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}
/* 2019/11/20更新 兼容大/小头图模式和交错模式 */
6. 首页文章列表头图悬停放大并将超出范围隐藏
.index-post-img {
overflow: hidden;
}
.item-thumb,
.item-thumb-small {
transition: all 0.3s;
}
.item-thumb:hover,
.item-thumb-small:hover {
transform: scale(1.1)
}
/* 2019/11/20更新 兼容大/小头图模式和交错模式 */
7. 文章内头图和文章图片悬停放大并将超出范围隐藏
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
8. 页面顶部进度条
在handsome/component/header.php
文件中最下面添加代码:
<div class="progress-top" style="position: fixed; top: 0px; height: 5px; background: rgba(31, 159, 199, 0.79); border-radius: 500px; z-index: 5200;"></div>
然后在后台开发者设置
-自定义JavaScript
中添加js代码:
let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollAvail = pageHeight - windowHeight;
window.onscroll = function () {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
document.querySelector('.progress-top').style.width = (scrollTop / scrollAvail) * 100 + '%';
}
同样,如果主题开启了pjax,也需要在pjax回调函数填写上面代码。
9. 右侧列表导航栏图标颜色(6.0版本无效)
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
10. 点击空白区域隐藏歌曲列表(6.0版本已添加,无需再设置)
主题中原来是必须重新点击耳机图标才能将歌曲列表隐藏,感觉有点累,而且此时再点击闲言碎语会将两个元素重叠。设置之后可以点击空白区域将歌曲列表隐藏,由于本文主旨是尽量不修改源码,所以实现的方式较为繁琐。先添加css:
.musicPlayerHiden {
display: none;
}
然后添加js代码:
document.body.onclick = function () {
document.querySelector(".skPlayer-list").classList.add("musicPlayerHiden");
}
document.querySelector(".skPlayer-list-switch").onclick = function (e) {
document.querySelector(".skPlayer-list").classList.remove("musicPlayerHiden");
document.querySelector(".skPlayer-list").onclick = function (e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancalBubble = true;
}
}
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancalBubble = true;
}
}
11. 将回到顶部按钮下移
个人感觉看完文章视线是在屏幕下半区域的,所以将回到顶部按钮往下移动了一些。
.topButton {
top: 640px;
}
暂时就改了这么些,如果以后还有修改的话会继续在下面添加。
29 条评论
不错不错,我喜欢看
不错不错,我喜欢看 https://www.jiwenlaw.com/
|´・ω・)ノ哦耶,感谢推荐
感谢分享
右边那个按钮,点开会弹出来目录,那个怎么弄?
这个是markdown里面的标题
7.x.x版本头像呼吸光环和鼠标悬停旋转放大竖排样式失效了
我这边正常,竖排样式是什么
喜欢你右边这个血小板嘿嘿嘿
pjax函数填了 按F5标签云颜色就没了怎么解决
F5不是刷新吗 我进你网站看了一下正常
嘻嘻,刚弄好谢啦
客气
你好,博主,我又来了,(๑•̀ㅁ•́ฅ) handsome主题更新到6.0以后,我发现有个BUG,就是首页左侧栏头像懒,默认头像好像变小了,另外鼠标放上去旋转变大特效有BUG了,期望博主能够处理一下。谢谢
改好了,6.0头像是左右结构,所以头像改小了
你好.请问一下我什么我文章的小头图一直处于没图片的状态00.0.0
这个去问一下主题作者吧
大佬,在设置小头图模式的情况下能不能让首页文章列表鼠标悬停上浮特效实现? 希望大佬能够加一下这个特效,我一般用的是小头图模式
已经改好了,之前没考虑到小头图模式
果然够快速啊,感谢博主
客气
66666
博主,您好,请问您一下,为什么在点击空白区域隐藏歌曲列表修改的时候,在后台设置里使用您上面显示的代码,还是不可以呢,请问还有其他方法吗?谢谢
这个功能不大,可以不设置
你好鸭,为什么你的 首页文章列表悬停上浮 在手机上可以显示,我的不可以鸭。
清除一下浏览器缓存试试
超级奈斯
不错