不知道您有没有看到过本博客在主页加了一个比较劣质的“雪花”效果，
这是在Hexo上，使用了注入器选择特定的页面。
由以下代码实现：（经过压缩和转义）
1
| hexo.extend.injector.register('body_end', '<script>const today=new Date();const day=today.getDate();const month=today.getMonth()+1;const specialDates=[\'1/1\',\'12/21\',\'12/24\',\'12/25\'];const todayString=\`\${month}/\${day}\`;if(specialDates.includes(todayString)){const style=document.createElement(\'style\');style.innerHTML=\'.snowflake{position:fixed;border-radius:50%;background-color:white;pointer-events:none;opacity:0;transition:opacity 1s ease-out;}\';document.head.appendChild(style);const maxSnowflakes=140;const maxFlakeSize=12;const minFlakeSize=10;const maxSpeed=1.1;const minSpeed=0.6;const maxDrift=0.12;const snowflakes=[];function createSnowflake(){const size=Math.random()*(maxFlakeSize-minFlakeSize)+minFlakeSize;const snowflake={x:Math.random()*window.innerWidth,y:Math.random()*window.innerHeight,size:size,speed:Math.random()*(maxSpeed-minSpeed)+minSpeed,drift:Math.random()*(maxDrift*2)-maxDrift,element:null};snowflake.element=document.createElement(\'div\');snowflake.element.className=\'snowflake\';snowflake.element.style.width=\`\${snowflake.size}px\`;snowflake.element.style.height=\`\${snowflake.size}px\`;snowflake.element.style.opacity=0;snowflake.element.style.transform=\`translate(\${snowflake.x}px,\${snowflake.y}px)\`;document.body.insertBefore(snowflake.element,document.body.firstChild);snowflakes.push(snowflake);setTimeout(()=>{snowflake.element.style.opacity=Math.random()*0.5+0.5},Math.random()*1000)}function updateSnowflakes(){for(let i=0;i<snowflakes.length;i++){const snowflake=snowflakes[i];snowflake.y+=snowflake.speed;snowflake.x+=snowflake.drift;if(snowflake.x<0){snowflake.x=0}else if(snowflake.x>window.innerWidth-snowflake.size){snowflake.x=window.innerWidth-snowflake.size}if(Math.random()<0.01){snowflake.drift=Math.random()*(maxDrift*2)-maxDrift}if(snowflake.y>window.innerHeight){snowflake.y=-snowflake.size;snowflake.x=Math.random()*window.innerWidth}snowflake.element.style.transform=\`translate(\${snowflake.x}px,\${snowflake.y}px)\`}}function maintainSnowflakeCount(){for(let i=snowflakes.length-1;i>=0;i--){if(snowflakes[i].y>window.innerHeight){document.body.removeChild(snowflakes[i].element);snowflakes.splice(i,1)}}while(snowflakes.length<maxSnowflakes){createSnowflake()}}function animateSnow(){updateSnowflakes();maintainSnowflakeCount();requestAnimationFrame(animateSnow)}for(let i=0;i<maxSnowflakes;i++){createSnowflake()}animateSnow()}</script>', 'home');
|
源代码：
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
| const today = new Date();
const day = today.getDate();
const month = today.getMonth() + 1;
const specialDates = ['1/1', '12/21', '12/24', '12/25'];
const todayString = `${month}/${day}`;
if (specialDates.includes(todayString)) {
const style = document.createElement('style');
style.innerHTML = '.snowflake{position:fixed;border-radius:50%;background-color:white;pointer-events:none;opacity:0;transition:opacity 1s ease-out;}';
document.head.appendChild(style);
const maxSnowflakes = 140;
const maxFlakeSize = 12;
const minFlakeSize = 10;
const maxSpeed = 1.1;
const minSpeed = 0.6;
const maxDrift = 0.12;
const snowflakes = [];
function createSnowflake() {
const size = Math.random() * (maxFlakeSize - minFlakeSize) + minFlakeSize;
const snowflake = {
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
size: size,
speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,
drift: Math.random() * (maxDrift * 2) - maxDrift,
element: null
};
snowflake.element = document.createElement('div');
snowflake.element.className = 'snowflake';
snowflake.element.style.width = `${snowflake.size}px`;
snowflake.element.style.height = `${snowflake.size}px`;
snowflake.element.style.opacity = 0;
snowflake.element.style.transform = `translate(${snowflake.x}px,${snowflake.y}px)`;
document.body.insertBefore(snowflake.element, document.body.firstChild);
snowflakes.push(snowflake);
setTimeout(() => {
snowflake.element.style.opacity = Math.random() * 0.5 + 0.5;
}, Math.random() * 1000);
}
function updateSnowflakes() {
for (let i = 0; i < snowflakes.length; i++) {
const snowflake = snowflakes[i];
snowflake.y += snowflake.speed;
snowflake.x += snowflake.drift;
if (snowflake.x < 0) {
snowflake.x = 0;
} else if (snowflake.x > window.innerWidth - snowflake.size) {
snowflake.x = window.innerWidth - snowflake.size;
}
if (Math.random() < 0.01) {
snowflake.drift = Math.random() * (maxDrift * 2) - maxDrift;
}
if (snowflake.y > window.innerHeight) {
snowflake.y = -snowflake.size;
snowflake.x = Math.random() * window.innerWidth;
}
snowflake.element.style.transform = `translate(${snowflake.x}px,${snowflake.y}px)`;
}
}
function maintainSnowflakeCount() {
for (let i = snowflakes.length - 1; i >= 0; i--) {
if (snowflakes[i].y > window.innerHeight) {
document.body.removeChild(snowflakes[i].element);
snowflakes.splice(i, 1);
}
}
while (snowflakes.length < maxSnowflakes) {
createSnowflake();
}
}
function animateSnow() {
updateSnowflakes();
maintainSnowflakeCount();
requestAnimationFrame(animateSnow);
}
for (let i = 0; i < maxSnowflakes; i++) {
createSnowflake();
}
animateSnow();
}
|
您可以通过修改 specialDates 数组的日期来决定要在哪些时候显示雪花效果，
格式：月/日，每项用引号圈住，用逗号隔开，例如：
1
| '1/1', '12/21', '12/24', '12/25'
|
效果模仿了青柠起始页的（？），233开个玩笑（我知道一点都不像。
墨离在 2024/12/19 进行了创作，更新于 2024/12/24，代码使用 MIT 许可协议授权。