前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >Hexo关于Butterfly的一些小修改

Hexo关于Butterfly的一些小修改

作者头像
Dreamy.TZK
发布于 2020-04-21 10:15:09
2.3K0
发布于 2020-04-21 10:15:09
举报
文章被收录于专栏：小康的自留地小康的自留地

前置说明

此篇文章主要记录此博客"魔改"的部分。

  • 此博客魔改全部为css及js覆盖方式修改（友链页面除外）
  • 开启只需要引入对应的css即可。
  • 关闭注释css/js引入即可

注：大多css没有提供可以直接引用的链接，大家可以自行创建css，然后放到博客目录进行引用。

如无特殊声明，引入对应css即可。对应css请在最下方查看。

背景

与本博客同款背景。开启需关闭背景图片设置，可能也需要关闭js动态背景。具体请自己尝试，本人没有尝试过。

代码语言：javascript
复制
/* 网页背景颜色 */
#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%
  );
}

鼠标样式

代码语言：javascript
复制
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;
}

页脚渐变

代码语言：javascript
复制
/* 页脚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

代码语言：javascript
复制
/* 边框呼吸灯效果 */
@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下即可）

代码语言：javascript
复制
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

在线css提供

如何引入css

在配置文件中搜索index,然后照着格式引入即可。例如：

注：不同版本可能设置略有不同，请仔细对照你所使用版本的文档。

本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-04-17，如有侵权请联系 cloudcommunity@tencent.com 删除
hexo
https
网络安全
css
cdn

本文分享自 作者个人站点/博客 前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ，欢迎热爱写作的你一起参与！

hexo
https
网络安全
css
cdn
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 前置说明
  • 背景
  • 鼠标样式
  • 页脚渐变
  • 特殊按钮
  • 友情链接页面修改
    • 字段说明
    • 在线css提供
    • 如何引入css
    领券

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

    Copyright © 2013 - 2024 Tencent Cloud.

    All Rights Reserved. 腾讯云 版权所有

    登录 后参与评论