前言
handsome
主题
在复杂中,保持简洁。 一款精心打磨后的typecho
主题
美化
为了减少对源码的修改,本次美化大多数可以直接在后台开发者设置-自定义css中添加代码即可。
1. 头像呼吸光环和鼠标悬停旋转放大
.img-full {
width: 100px;
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: 0.5s;
}
.img-full: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-circle {
transition: all 0.3s;
}
.img-circle: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
回调函数中
5. 首页文章列表悬停上浮
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
6. 首页文章列表头图悬停放大并将超出范围隐藏
.index-post-img {
overflow: hidden;
}
.item-thumb {
transition: all 0.3s;
}
.item-thumb:hover {
transform: scale(1.1)
}
7. 文章内头图和文章图片悬停放大并将超出范围隐藏
.entry-thumbnail {
overflow: hidden;
}
#post-content img {
border-radius: 10px;
transition: 0.5s;
}
#post-content img:hover {
transform: scale(1.05);
}
8. 右侧列表导航栏图标颜色
.glyphicon-fire {
color: #ff0000;
}
.nav-tabs-alt .glyphicon-comment {
color: #495dc3;
}
.glyphicon-transfer {
color: #0e5458;
}
主题中原来是必须重新点击耳机图标才能将歌曲列表隐藏,感觉有点累,而且此时再点击闲言碎语会将两个元素重叠。设置之后可以点击空白区域将歌曲列表隐藏,由于本文主旨是尽量不修改源码,所以实现的方式较为繁琐。先添加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;
}
}
10.文章标题居中
.panel h2{
text-align: center;
}
.post-item-foot-icon{
text-align: center;
}
目前小站就改了这些,如果后面再修改再添加,感谢七云博客提供了大部分代码
版权属于:作者名称
本文链接:https://blog.qqiwu.cn/29.html
转载时须注明出处及本声明
One comment
请问一下,您博客主页文章移动到对应文章,出现详情和磨砂效果是如何做到的