效果

添加方法

[blogroot]/source/文件夹下新建js文件夹

js文件夹下新建文件universe.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
49
50
51
52
53
54
55
56
57
58
59
60
61
function dark() {
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var n, e, i, h, t = .05,
s = document.getElementById("universe"),
o = !0,
a = "180,184,240",
r = "226,225,142",
d = "226,225,224",
c = [];

function f() {
n = window.innerWidth, e = window.innerHeight, i = .216 * n, s.setAttribute("width", n), s.setAttribute("height", e)
}

function u() {
h.clearRect(0, 0, n, e);
for (var t = c.length, i = 0; i < t; i++) {
var s = c[i];
s.move(), s.fadeIn(), s.fadeOut(), s.draw()
}
}

function y() {
this.reset = function () {
this.giant = m(3), this.comet = !this.giant && !o && m(10), this.x = l(0, n - 10), this.y = l(0, e), this.r = l(1.1, 2.6), this.dx = l(t, 6 * t) + (this.comet + 1 - 1) * t * l(50, 120) + 2 * t, this.dy = -l(t, 6 * t) - (this.comet + 1 - 1) * t * l(50, 120), this.fadingOut = null, this.fadingIn = !0, this.opacity = 0, this.opacityTresh = l(.2, 1 - .4 * (this.comet + 1 - 1)), this.do = l(5e-4, .002) + .001 * (this.comet + 1 - 1)
}, this.fadeIn = function () {
this.fadingIn && (this.fadingIn = !(this.opacity > this.opacityTresh), this.opacity += this.do)
}, this.fadeOut = function () {
this.fadingOut && (this.fadingOut = !(this.opacity < 0), this.opacity -= this.do / 2, (this.x > n || this.y < 0) && (this.fadingOut = !1, this.reset()))
}, this.draw = function () {
if (h.beginPath(), this.giant) h.fillStyle = "rgba(" + a + "," + this.opacity + ")", h.arc(this.x, this.y, 2, 0, 2 * Math.PI, !1);
else if (this.comet) {
h.fillStyle = "rgba(" + d + "," + this.opacity + ")", h.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, !1);
for (var t = 0; t < 30; t++) h.fillStyle = "rgba(" + d + "," + (this.opacity - this.opacity / 20 * t) + ")", h.rect(this.x - this.dx / 4 * t, this.y - this.dy / 4 * t - 2, 2, 2), h.fill()
} else h.fillStyle = "rgba(" + r + "," + this.opacity + ")", h.rect(this.x, this.y, this.r, this.r);
h.closePath(), h.fill()
}, this.move = function () {
this.x += this.dx, this.y += this.dy, !1 === this.fadingOut && this.reset(), (this.x > n - n / 4 || this.y < 0) && (this.fadingOut = !0)
}, setTimeout(function () {
o = !1
}, 50)
}

function m(t) {
return Math.floor(1e3 * Math.random()) + 1 < 10 * t
}

function l(t, i) {
return Math.random() * (i - t) + t
}
f(), window.addEventListener("resize", f, !1),
function () {
h = s.getContext("2d");
for (var t = 0; t < i; t++) c[t] = new y, c[t].reset();
u()
}(),
function t() {
document.getElementsByTagName('html')[0].getAttribute('data-theme') == 'dark' && u(), window.requestAnimationFrame(t)
}()
};
dark()

在倒数第五行,设置了主题data-theme为深色主题dark时才能生效

[blogroot]/source/文件夹下新建css文件夹

js文件夹下新建文件universe.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 背景宇宙星光  */
#universe{
display: block;
position: fixed;
margin: 0;
padding: 0;
border: 0;
outline: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}

引入新建的 js 和 css 文件

在主题的配置文件_config.butterfly.yml的 inject 中添加相应的内容

1
2
3
4
5
6
7
8
9
10
11
12
# Inject
# 插入代码到 head(在 '</head>' 标签之前)和底部(在 '</body>' 标签之前)
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
# 深色模式星空效果 css
- <link rel="stylesheet" href="/css/universe.css">
bottom:
# - <script src="xxxx"></script>
# 深色模式星空效果 js
- <canvas id="universe"></canvas>
- <script src="/js/universe.js"></script>