此处备份handsome主题一些自定义的教程:

  • 彩色标签云:在开发者设置-自定义 JavaScript填写:
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回调函数。

  • 头像相关美化:在开发者设置-自定义CSS
/*头像呼吸光环和鼠标悬停旋转放大*/
.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;
    }
}
/*评论头像旋转*/
.img-circle {
    transition: all 0.3s;
}
.img-circle:hover {
    transform: rotate(360deg);
}
最后修改:2022 年 07 月 10 日
如果觉得我的文章对你有用,请随意赞赏