介绍

韩小韩API接口站

Lete乐特 ‘s Blog

小康博客

源码(API)出处 ↑

使用

冒泡特效

冒泡

找个JS文件粘贴进去就行了(简单粗暴,但是要在主题配置里确定引用了的) ↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 气泡
function qipao() {
$('#page-header').circleMagic({
radius: 10,
density: .2,
color: 'rgba(255,255,255,.4)',
clearOffset: 0.99
});
}! function(p) {
p.fn.circleMagic = function(t) {
var o, a, n, r, e = !0,
i = [],
d = p.extend({ color: "rgba(255,0,0,.5)", radius: 10, density: .3, clearOffset: .2 }, t),
l = this[0];

function c() { e = !(document.body.scrollTop > a) }

function s() { o = l.clientWidth, a = l.clientHeight, l.height = a + "px", n.width = o, n.height = a }

function h() {
if (e)
for (var t in r.clearRect(0, 0, o, a), i) i[t].draw();
requestAnimationFrame(h)
}

function f() {
var t = this;

function e() { t.pos.x = Math.random() * o, t.pos.y = a + 100 * Math.random(), t.alpha = .1 + Math.random() * d.clearOffset, t.scale = .1 + .3 * Math.random(), t.speed = Math.random(), "random" === d.color ? t.color = "rgba(" + Math.floor(255 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.floor(0 * Math.random()) + ", " + Math.random().toPrecision(2) + ")" : t.color = d.color }
t.pos = {}, e(), this.draw = function() { t.alpha <= 0 && e(), t.pos.y -= t.speed, t.alpha -= 5e-4, r.beginPath(), r.arc(t.pos.x, t.pos.y, t.scale * d.radius, 0, 2 * Math.PI, !1), r.fillStyle = t.color, r.fill(), r.closePath() }
}! function() {
o = l.offsetWidth, a = l.offsetHeight,
function() {
var t = document.createElement("canvas");
t.id = "canvas", t.style.top = 0, t.style.zIndex = 0, t.style.position = "absolute", l.appendChild(t), t.parentElement.style.overflow = "hidden"
}(), (n = document.getElementById("canvas")).width = o, n.height = a, r = n.getContext("2d");
for (var t = 0; t < o * d.density; t++) {
var e = new f;
i.push(e)
}
h()
}(), window.addEventListener("scroll", c, !1), window.addEventListener("resize", s, !1)
}
}(jQuery);

// 调用气泡方法
qipao();

波浪特效

波浪

找到index.styl文件粘贴进去z-index看自己喜好调整)(要确定被引用)

1
2
3
4
5
6
.hans-container
position: fixed;
bottom: 0px;
width: 100%;
height: 120px;
z-index: -1

把这段粘贴到主题配置文件bottom:选项里面去 ↓

1
2
<div id="hans-bolang"></div>
<script src="https://api.vvhan.com/api/bolang"></script>

透明特效

首页部分

方法一

把横幅图片top_img与背景图background设置成一样的 ↓

透明2

方法二

找个js文件放进去

1
2
3
4
var full_page = document.getElementsByClassName("full_page");
if (full_page.length != 0) {
full_page[0].style.background = "transparent";
}

各有不同!

页脚部分

footer.styl(位置直接搜索)里的#footer里加一句话 ↓

1
background: transparent !important;

透明1

其他页面头部

首先在主题配置文件里全部把这些页面的图片值改为false

如:

1
tag_img: false

然后在head.styl里把

1
background-color: $light-blue

注释掉

1
// background-color: $light-blue

夜间模式可能不太行

透明

MAC代码框美化

白色:

白

1
2
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/macWhite.css">

黑色:

黑

1
2
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/macWhite.css">

滚动条美化

gundongtiao

找个styl文件粘贴进去:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 /* 滚动条 */
::-webkit-scrollbar
width: 8px;
height: 8px;


::-webkit-scrollbar-track
background-color: rgba(73, 177, 245, 0.2);
border-radius: 2em;


::-webkit-scrollbar-thumb
background-color: #49b1f5;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent
);
border-radius: 2em;


::-webkit-scrollbar-corner
background-color: transparent;


::-moz-selection
color: #fff;
background-color: #49b1f5;

默认情况