此篇文章主要记录此博客"魔改"的部分。
注:大多css没有提供可以直接引用的链接,大家可以自行创建css,然后放到博客目录进行引用。
如无特殊声明,引入对应css即可。对应css请在最下方查看。
与本博客同款背景。开启需关闭背景图片设置,可能也需要关闭js动态背景。具体请自己尝试,本人没有尝试过。
/* 网页背景颜色 */
#web_bg {
background: -webkit-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -moz-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -o-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: -ms-linear-gradient(
0deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
background: linear-gradient(
90deg,
rgba(247, 149, 51, 0.1) 0,
rgba(243, 112, 85, 0.1) 15%,
rgba(239, 78, 123, 0.1) 30%,
rgba(161, 102, 171, 0.1) 44%,
rgba(80, 115, 184, 0.1) 58%,
rgba(16, 152, 173, 0.1) 72%,
rgba(7, 179, 155, 0.1) 86%,
rgba(109, 186, 130, 0.1) 100%
);
}
body {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
default;
}
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
default;
}
/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
@keyframes Gradient {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
#footer {
background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab);
background-size: 400% 400%;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
-o-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#footer:before {
background-color: rgba(0, 0, 0, 0);
}
样式及使用请参考https://www.antmoe.com/posts/58a62380/index.html
友情链接修改内容过大,不建议小白修改。
此修改需要替换作者文件(及flink.pug
),位置\themes\Butterfly\layout\
flink.pug
下载地址:https://tzk.lanzous.com/ibidw1a
/* 边框呼吸灯效果 */
@keyframes link_custom {
from {
box-shadow: 0 0 5px var(--primary-color, grey),
inset 0 0 5px var(--primary-color, grey),
0 1px 0 var(--primary-color, grey);
}
to {
box-shadow: 0 0 20px var(--primary-color, grey),
inset 0 0 10px var(--primary-color, grey),
0 1px 0 var(--primary-color, grey);
}
}
/* 边框彩色呼吸灯 */
@keyframes link_custom1 {
0% {
box-shadow: 0 0 4px #ca00ff;
}
25% {
box-shadow: 0 0 16px #00b5e5;
}
50% {
box-shadow: 0 0 4px #00f;
}
75% {
box-shadow: 0 0 16px #b1da21;
}
100% {
box-shadow: 0 0 4px #f00;
}
}
/* 边框闪烁 */
@keyframes flash {
from {
border-color: transparent;
}
to {
border-color: var(--primary-color, grey);
}
}
/* 头像自动旋转 */
@keyframes auto_rotate_left {
from {
transform: rotate(0);
}
to {
transform: rotate(-360deg);
}
}
@keyframes auto_rotate_right {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.flink#article-container .post-cards .md-links > .md-links-item a:hover {
color: #fff;
}
.flink .post-cards .md-links > .md-links-item a {
color: var(--primary-color, #49b1f5);
text-decoration: none;
}
.flink .post-cards .md-links > .md-links-item:hover {
box-shadow: 0 2px 20px var(--primary-color, #49b1f5);
animation-play-state: paused;
}
.flink#article-container .post-cards .md-links > .md-links-item:before {
background: var(--primary-color, #49b1f5);
}
.flink .post-cards .md-links > .md-links-item {
border: 0px solid var(--primary-color, #49b1f5);
}
.flink#article-container .post-cards .md-links > .md-links-item:hover img {
-webkit-transform: rotate(var(--primary-rotate));
-moz-transform: rotate(var(--primary-rotate));
-o-transform: rotate(var(--primary-rotate));
-ms-transform: rotate(var(--primary-rotate));
transform: rotate(var(--primary-rotate));
}
/* 头像自动旋转 */
.flink#article-container .post-cards .md-links > .md-links-item a .lauto {
animation: auto_rotate_left var(--autotime) linear infinite;
}
.flink#article-container .post-cards .md-links > .md-links-item a .rauto {
animation: auto_rotate_right var(--autotime) linear infinite;
}
/* 友联字体颜色 */
/* name与desc的颜色 */
.flink#article-container .post-cards .md-links > .md-links-item .customcolor {
color: var(--namecolor, #1f2d3d);
}
/* name与des鼠标悬停的字体颜色 */
.flink#article-container
.post-cards
.md-links
> .md-links-item
.customcolor:hover {
color: #fff;
}
至于如何配合使用,请自行尝试(此配置加在link.yml
下即可)
name: 小康博客
link: https://antmoe.com
avatar: https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/avatar.jpg
descr: 更多效果自行搭配
# 边框大小 默认为0
width: 0px
# 边框样式 默认 solid
style: solid
# 边框颜色 默认淡蓝色 #49b1f5
color: "#0078e7"
# 自动旋转 可选值 flash(闪现) link_custom(单色呼吸灯) link_custom1(彩色呼吸灯)
custom: link_custom1
# 动画时长设定,默认为0
time: 4s
# name的颜色
namecolor: "#ff9191"
# descr的颜色
descolor: "#ff9191"
# 背景颜色
background: 0
# 鼠标悬停旋转角度
rotate: 360deg
# 自动旋转 latuo左旋转 rauto右旋转
autorotate: "lauto"
# 旋转的周期(时长)
autotime: 2s
#移除此链接的权重 0为否 非0为移除
remove: 0
在配置文件中搜索index
,然后照着格式引入即可。例如:
注:不同版本可能设置略有不同,请仔细对照你所使用版本的文档。