之前的 Cherry 樱花雨背景特效 感觉太花里胡哨了,自己整了个渐变星空背景,效果看着还不错,有兴趣的伙伴可以观摩一下。
教程
[Blogroot]\_config.butterfly.yml
找到 index_img 设置为空:1
2# The banner image of home page
index_img:[Blogroot]\_config.butterfly.yml
找到 background 设置渐变色:1
2
3
4# Website Background (設置網站背景)
# can set it to color or image (可設置圖片 或者 顔色)
# The formal of image: url(http://xxxxxx.com/xxx.jpg)
background: 'linear-gradient(to right top, #009fff, #ec2f4b)'[Blogroot]\themes\butterfly\source\css\_global\index.styl
找到 #web_bg 设置渐变动画:1
2
3
4
5
6
7
8
9
10
11
12
13#web_bg {
position: fixed;
z-index: -999;
width: 100%;
height: 100%;
background: $web-bg;
background-attachment: local;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
animation: bganimation 10s infinite;
background-size: 800%;
}新建
[Blogroot]\themes\butterfly\source\css\_cyan\index.styl
,添加渐变动画 CSS 和 粒子元素的样式: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/* 樱花特效样式 */
.canvas-container {
position: fixed;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
left: 0;
top: 0;
z-index: -1;
}
// 阅读模式下隐藏背景
.read-mode .canvas-container {
display: none;
}
// 首页背景渐变动画
@keyframes bganimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}记得在
[Blogroot]\themes\butterfly\source\css\index.styl
引入,以后所有的 css 都可以写在这个里面1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25if (hexo-config('css_prefix')) {
@import 'nib';
}
@import '_third-party/normalize.min.css';
// project
@import 'var';
@import '_global/*';
@import '_highlight/highlight';
@import '_page/*';
@import '_layout/*';
@import '_tags/*';
@import '_mode/*';
+ @import '_cyan/*';
// search
if (hexo-config('algolia_search.enable')) {
@import '_search/index';
@import '_search/algolia';
}
if (hexo-config('local_search') && hexo-config('local_search.enable')) {
@import '_search/index';
@import '_search/local-search';
}[Blogroot]\themes\butterfly\layout\includes\layout.pug
添加元素:1
2
3
4
5
6
7
8
9
10
11
12if page.type !== '404'
+ #canvas.canvas-container
#body-wrap(class=pageType)
include ./header/index.pug
main#content-inner.layout(class=hideAside)
if body
div!= body
else
block content
if theme.aside.enable && page.aside !== false
include widget/index.pug新建
[Blogroot]\themes\butterfly\source\js\sky.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102var scene,
camera,
renderer,
container,
aspect,
fov,
plane,
far,
mouseX,
mouseY,
windowHalfX,
windowHalfY,
geometry,
starStuff,
materialOptions,
stars;
init();
animate();
function init() {
container = document.getElementById(`canvas`);
mouseX = 0;
mouseY = 0;
aspect = window.innerWidth / window.innerHeight;
fov = 40;
plane = 1;
far = 800;
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera = new THREE.PerspectiveCamera(
fov,
aspect,
plane,
far
);
camera.position.z = far / 2;
scene = new THREE.Scene({ antialias: true });
scene.fog = new THREE.FogExp2(0x1b1b1b, 0.0001);
starForge();
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
renderer.setClearColor(0x000000, 0.0);
container.appendChild(renderer.domElement);
document.addEventListener('mousemove', onMouseMove, false);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * 0.005;
camera.position.y += (-mouseY - camera.position.y) * 0.005;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function starForge() {
var amount = 45000;
geometry = new THREE.SphereGeometry(1000, 100, 50);
materialOptions = {
color: new THREE.Color(0xffffff),
size: 1.1,
transparency: true,
opacity: 0.8
};
starStuff = new THREE.PointsMaterial(materialOptions);
for (var i = 0; i < amount; i++) {
var item = new THREE.Vector3();
item.x = Math.random() * 2000 - 1000;
item.y = Math.random() * 2000 - 1000;
item.z = Math.random() * 2000 - 1000;
geometry.vertices.push(item);
}
stars = new THREE.PointCloud(geometry, starStuff);
scene.add(stars);
}
function onMouseMove(e) {
mouseX = e.clientX - windowHalfX;
mouseY = e.clientY - windowHalfY;
}[Blogroot]\_config.butterfly.yml
找到 inject,引入 js,由于星空动画是基于 three.js,所以一定要先引入 three.js:1
2
3
4
5inject:
head:
- <script src="https://ali-oss.xmwpro.com/cdn/js/three.min.js"></script>
bottom:
- <script async data-pjax src="/js/sky.js"></script>最后执行 hexo cl,hexo g,hexo s 三连即可看到效果。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Cyan!
评论
您无需删除空行,直接评论以获取最佳展示效果