樱花特效配置 - PengXing's Blog

概述#

樱花特效配置用于在网站中添加动态的樱花飘落效果，营造浪漫的视觉氛围。

前言#

最近想要添加的功能有点多，我把整个config.ts配置文件拆分为多个模块化文件，创建独立的siteConfig、navBarConfig等模块

基础配置#

1
import type { SakuraConfig } from "../types/config";
2

3
export const sakuraConfig: SakuraConfig = {
4
  enable: true, // 默认关闭樱花特效
5
  type: 'canvas', // 樱花特效类型：'canvas' 或 'css'
6
  sakuraNum: 30, // 樱花数量
7
  limitTimes: -1, // 樱花越界限制次数，-1为无限循环
8
  size: {
9
    min: 0.4, // 樱花最小尺寸倍数
10
    max: 1.2, // 樱花最大尺寸倍数
11
  },
12
  opacity: {
13
    min: 0.5, // 樱花最小不透明度
14
    max: 1, // 樱花最大不透明度
15
  },
16
  speed: {
17
    horizontal: {
18
      min: -1.7, // 水平移动速度最小值
19
      max: -1.2, // 水平移动速度最大值
20
    },
21
    vertical: {
22
      min: 1.5, // 垂直移动速度最小值
23
      max: 2.2, // 垂直移动速度最大值
24
    },
25
    rotation: 0.03, // 旋转速度
26
    fadeSpeed: 0.03, // 消失速度，不应大于最小不透明度
27
  },
28
  zIndex: 100, // 层级，确保樱花在合适的层级显示
29
};

基础设置#

选项	类型	说明	默认值
`enable`	`boolean`	是否启用樱花特效	`true`
`type`	`‘canvas'	'css’`	樱花特效类型：‘canvas’ 或 ‘css
`sakuraNum`	`number`	樱花数量	`21`
`limitTimes`	`number`	越界限制次数，-1为无限	`-1`

尺寸设置#

选项	类型	说明	默认值
`size.min`	`number`	樱花最小尺寸倍数	`0.5`
`size.max`	`number`	樱花最大尺寸倍数	`1.1`

透明度设置#

选项	类型	说明	默认值
`opacity.min`	`number`	樱花最小不透明度	`0.3`
`opacity.max`	`number`	樱花最大不透明度	`0.9`

速度设置#

选项	类型	说明	默认值
`speed.horizontal.min`	`number`	水平移动速度最小值	`-1.7`
`speed.horizontal.max`	`number`	水平移动速度最大值	`-1.2`
`speed.vertical.min`	`number`	垂直移动速度最小值	`1.5`
`speed.vertical.max`	`number`	垂直移动速度最大值	`2.2`
`speed.rotation`	`number`	旋转速度	`0.03`
`speed.fadeSpeed`	`number`	消失速度，不应大于最小不透明度	`0.03`

层级设置#

选项	类型	说明	默认值
`zIndex`	`number`	樱花层级	`100`

使用场景#

1. 浪漫主题网站#

1
export const sakuraConfig: SakuraConfig = {
2
  enable: true,
3
  type: 'canvas',
4
  sakuraNum: 30, // 更多樱花
5
  limitTimes: -1,
6
  size: {
7
    min: 0.8,
8
    max: 1.5, // 更大的樱花
9
  },
10
  opacity: {
11
    min: 0.4,
12
    max: 0.95, // 更高的透明度
13
  },
14
  speed: {
15
    horizontal: {
16
      min: -2.0,
17
      max: -1.0, // 更慢的飘落
18
    },
19
    vertical: {
20
      min: 1.0,
21
      max: 1.8,
22
    },
23
    rotation: 0.02, // 更慢的旋转
24
    fadeSpeed: 0.02, // 更慢的消失
25
  },
26
  zIndex: 100,
27
};

2. 简约风格#

1
export const sakuraConfig: SakuraConfig = {
2
  enable: true,
3
  type: 'canvas',
4
  sakuraNum: 10, // 少量樱花
5
  limitTimes: -1,
6
  size: {
7
    min: 0.3,
8
    max: 0.8, // 较小的樱花
9
  },
10
  opacity: {
11
    min: 0.2,
12
    max: 0.7, // 较低的透明度
13
  },
14
  speed: {
15
    horizontal: {
16
      min: -1.0,
17
      max: -0.5,
18
    },
19
    vertical: {
20
      min: 2.0,
21
      max: 3.0, // 较快的飘落
22
    },
23
    rotation: 0.05,
24
    fadeSpeed: 0.05, // 较快的消失
25
  },
26
  zIndex: 100,
27
};

3. 节日主题#

1
export const sakuraConfig: SakuraConfig = {
2
  enable: true,
3
  type: 'canvas',
4
  sakuraNum: 50, // 大量樱花营造节日氛围
5
  limitTimes: -1,
6
  size: {
7
    min: 0.4,
8
    max: 1.2,
9
  },
10
  opacity: {
11
    min: 0.5,
12
    max: 1.0, // 完全不透明
13
  },
14
  speed: {
15
    horizontal: {
16
      min: -2.5,
17
      max: -1.5,
18
    },
19
    vertical: {
20
      min: 1.2,
21
      max: 2.5,
22
    },
23
    rotation: 0.04,
24
    fadeSpeed: 0.04,
25
  },
26
  zIndex: 100,
27
};

性能优化#

根据设备调整#

1
// 根据设备性能调整樱花数量
2
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
3

4
export const sakuraConfig: SakuraConfig = {
5
  enable: true,
6
  type: 'canvas',
7
  sakuraNum: isMobile ? 10 : 21, // 移动端减少樱花数量
8
  size: {
9
    min: 0.5,
10
    max: 1.1,
11
  },
12
  opacity: {
13
    min: 0.3,
14
    max: 0.9,
15
  },
16
  speed: {
17
    horizontal: { min: -1.7, max: -1.2 },
18
    vertical: { min: 1.5, max: 2.2 },
19
    rotation: 0.03,
20
    fadeSpeed: 0.03,
21
  },
22
  zIndex: 100,
23
};

条件启用#

1
// 只在特定页面启用
2
export const sakuraConfig: SakuraConfig = {
3
  enable: process.env.NODE_ENV === 'production', // 只在生产环境启用
4
  // ... 其他配置
5
};

新建代码#

src\types\config.ts#

1
// ....其他配置
2

3
export type SakuraConfig = {
4
  enable: boolean; // 是否启用樱花特效
5
  type?: 'canvas' | 'css'; // 樱花特效类型：'canvas' 或 'css
6
  sakuraNum: number; // 樱花数量，默认21
7
  limitTimes: number; // 樱花越界限制次数，-1为无限循环
8
  size: {
9
    min: number; // 樱花最小尺寸倍数
10
    max: number; // 樱花最大尺寸倍数
11
  };
12
  opacity: {
13
    min: number; // 樱花最小不透明度
14
    max: number; // 樱花最大不透明度
15
  };
16
  speed: {
17
    horizontal: {
18
    min: number; // 水平移动速度最小值
19
    max: number; // 水平移动速度最大值
20
    };
21
    vertical: {
22
    min: number; // 垂直移动速度最小值
23
    max: number; // 垂直移动速度最大值
24
    };
25
    rotation: number; // 旋转速度
26
    fadeSpeed: number; // 消失速度，不应大于最小不透明度
27
  };
28
  zIndex: number; // 层级，确保樱花在合适的层级显示
29
  };

src\components\effects\SakuraEffect.astro#

新建effects 文件夹，创建SakuraEffect.astro文件

1
---
2
import { sakuraConfig } from "@/config";
3

4
const config = sakuraConfig;
5
---
6

7
{sakuraConfig?.enable && sakuraConfig.type === 'canvas' && (
8
  <script define:vars={{ sakuraConfig: config }}>
9
    // 樱花对象类
10
    class Sakura {
11
      constructor(x, y, s, r, a, fn, idx, img, limitArray, config) {
12
        this.x = x;
13
        this.y = y;
14
        this.s = s;
15
        this.r = r;
16
        this.a = a;
17
        this.fn = fn;
18
        this.idx = idx;
19
        this.img = img;
20
        this.limitArray = limitArray;
21
        this.config = config;
22
      }
23

24
      draw(cxt) {
25
        cxt.save();
26
        cxt.translate(this.x, this.y);
27
        cxt.rotate(this.r);
28
        cxt.globalAlpha = this.a;
29
        cxt.drawImage(this.img, 0, 0, 40 * this.s, 40 * this.s);
30
        cxt.restore();
31
      }
32

33
      update() {
34
        this.x = this.fn.x(this.x, this.y);
35
        this.y = this.fn.y(this.y, this.y);
36
        this.r = this.fn.r(this.r);
37
        this.a = this.fn.a(this.a);
38
        // 如果樱花越界，重新调整位置
39
        if (
40
          this.x > window.innerWidth ||
41
          this.x < 0 ||
42
          this.y > window.innerHeight ||
43
          this.y < 0 ||
44
          this.a <= 0
45
        ) {
46
          // 如果樱花不做限制
47
          if (this.limitArray[this.idx] === -1) {
48
            this.resetPosition();
49
          }
50
          // 否则樱花有限制
51
          else {
52
            if (this.limitArray[this.idx] > 0) {
53
              this.resetPosition();
54
              this.limitArray[this.idx]--;
55
            }
56
          }
57
        }
58
      }
59

60
      resetPosition() {
61
        this.r = getRandom('fnr', this.config);
62
        if (Math.random() > 0.4) {
63
          this.x = getRandom('x', this.config);
64
          this.y = 0;
65
          this.s = getRandom('s', this.config);
66
          this.r = getRandom('r', this.config);
67
          this.a = getRandom('a', this.config);
68
        } else {
69
          this.x = window.innerWidth;
70
          this.y = getRandom('y', this.config);
71
          this.s = getRandom('s', this.config);
72
          this.r = getRandom('r', this.config);
73
          this.a = getRandom('a', this.config);
74
        }
75
      }
76
    }
77

78
    // 樱花列表类
79
    class SakuraList {
80
      constructor() {
81
        this.list = [];
82
      }
83

84
      push(sakura) {
85
        this.list.push(sakura);
86
      }
87

88
      update() {
89
        for (let i = 0, len = this.list.length; i < len; i++) {
90
          this.list[i].update();
91
        }
92
      }
93

94
      draw(cxt) {
95
        for (let i = 0, len = this.list.length; i < len; i++) {
96
          this.list[i].draw(cxt);
97
        }
98
      }
99

100
      get(i) {
101
        return this.list[i];
102
      }
103

104
      size() {
105
        return this.list.length;
106
      }
107
    }
108

109
    // 获取随机值的函数
110
    function getRandom(option, config) {
111
      let ret;
112
      let random;
113

114
      switch (option) {
115
        case 'x':
116
          ret = Math.random() * window.innerWidth;
117
          break;
118
        case 'y':
119
          ret = Math.random() * window.innerHeight;
120
          break;
121
        case 's':
122
          ret = config.size.min + Math.random() * (config.size.max - config.size.min);
123
          break;
124
        case 'r':
125
          ret = Math.random() * 6;
126
          break;
127
        case 'a':
128
          ret = config.opacity.min + Math.random() * (config.opacity.max - config.opacity.min);
129
          break;
130
        case 'fnx':
131
          random = config.speed.horizontal.min + Math.random() * (config.speed.horizontal.max - config.speed.horizontal.min);
132
          ret = function (x, y) {
133
            return x + random;
134
          };
135
          break;
136
        case 'fny':
137
          random = config.speed.vertical.min + Math.random() * (config.speed.vertical.max - config.speed.vertical.min);
138
          ret = function (x, y) {
139
            return y + random;
140
          };
141
          break;
142
        case 'fnr':
143
          ret = function (r) {
144
            return r + config.speed.rotation;
145
          };
146
          break;
147
        case 'fna':
148
          ret = function (alpha) {
149
            return alpha - config.speed.fadeSpeed * 0.01;
150
          };
151
          break;
152
      }
153
      return ret;
154
    }
155

156
    // 樱花管理器类
157
    class SakuraManager {
158
      constructor(config) {
159
        this.config = config;
160
        this.canvas = null;
161
        this.ctx = null;
162
        this.sakuraList = null;
163
        this.animationId = null;
164
        this.img = null;
165
        this.isRunning = false;
166
      }
167

168
      // 初始化樱花特效
169
      async init() {
170
        if (!this.config.enable || this.isRunning) {
171
          return;
172
        }
173

174
        // 创建图片对象
175
        this.img = new Image();
176
        this.img.src = '/donate/sakura.png'; // 使用樱花图片
177

178
        // 等待图片加载完成
179
        await new Promise((resolve, reject) => {
180
          if (this.img) {
181
            this.img.onload = () => resolve();
182
            this.img.onerror = () => reject(new Error('Failed to load sakura image'));
183
          }
184
        });
185

186
        this.createCanvas();
187
        this.createSakuraList();
188
        this.startAnimation();
189
        this.isRunning = true;
190
      }
191

192
      // 创建画布
193
      createCanvas() {
194
        this.canvas = document.createElement('canvas');
195
        this.canvas.height = window.innerHeight;
196
        this.canvas.width = window.innerWidth;
197
        this.canvas.setAttribute('style', `position: fixed; left: 0; top: 0; pointer-events: none; z-index: ${this.config.zIndex};`);
198
        this.canvas.setAttribute('id', 'canvas_sakura');
199
        document.body.appendChild(this.canvas);
200
        this.ctx = this.canvas.getContext('2d');
201

202
        // 监听窗口大小变化
203
        window.addEventListener('resize', this.handleResize.bind(this));
204
      }
205

206
      // 创建樱花列表
207
      createSakuraList() {
208
        if (!this.img || !this.ctx) return;
209

210
        this.sakuraList = new SakuraList();
211
        const limitArray = new Array(this.config.sakuraNum).fill(this.config.limitTimes);
212

213
        for (let i = 0; i < this.config.sakuraNum; i++) {
214
          const randomX = getRandom('x', this.config);
215
          const randomY = getRandom('y', this.config);
216
          const randomS = getRandom('s', this.config);
217
          const randomR = getRandom('r', this.config);
218
          const randomA = getRandom('a', this.config);
219
          const randomFnx = getRandom('fnx', this.config);
220
          const randomFny = getRandom('fny', this.config);
221
          const randomFnR = getRandom('fnr', this.config);
222
          const randomFnA = getRandom('fna', this.config);
223

224
          const sakura = new Sakura(
225
            randomX,
226
            randomY,
227
            randomS,
228
            randomR,
229
            randomA,
230
            {
231
              x: randomFnx,
232
              y: randomFny,
233
              r: randomFnR,
234
              a: randomFnA,
235
            },
236
            i,
237
            this.img,
238
            limitArray,
239
            this.config
240
          );
241

242
          sakura.draw(this.ctx);
243
          this.sakuraList.push(sakura);
244
        }
245
      }
246

247
      // 开始动画
248
      startAnimation() {
249
        if (!this.ctx || !this.canvas || !this.sakuraList) return;
250

251
        const animate = () => {
252
          if (!this.ctx || !this.canvas || !this.sakuraList) return;
253

254
          this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
255
          this.sakuraList.update();
256
          this.sakuraList.draw(this.ctx);
257
          this.animationId = requestAnimationFrame(animate);
258
        };
259

260
        this.animationId = requestAnimationFrame(animate);
261
      }
262

263
      // 处理窗口大小变化
264
      handleResize() {
265
        if (this.canvas) {
266
          this.canvas.width = window.innerWidth;
267
          this.canvas.height = window.innerHeight;
268
        }
269
      }
270

271
      // 停止樱花特效
272
      stop() {
273
        if (this.animationId) {
274
          cancelAnimationFrame(this.animationId);
275
          this.animationId = null;
276
        }
277

278
        if (this.canvas) {
279
          document.body.removeChild(this.canvas);
280
          this.canvas = null;
281
        }
282

283
        window.removeEventListener('resize', this.handleResize.bind(this));
284
        this.isRunning = false;
285
      }
286

287
      // 切换樱花特效
288
      toggle() {
289
        if (this.isRunning) {
290
          this.stop();
291
        } else {
292
          this.init();
293
        }
294
      }
295

296
      // 更新配置
297
      updateConfig(newConfig) {
298
        const wasRunning = this.isRunning;
299
        if (wasRunning) {
300
          this.stop();
301
        }
302
        this.config = newConfig;
303
        if (wasRunning && newConfig.enable) {
304
          this.init();
305
        }
306
      }
307

308
      // 获取运行状态
309
      getIsRunning() {
310
        return this.isRunning;
311
      }
312
    }
313

314
    // 创建全局樱花管理器实例
315
    let globalSakuraManager = null;
316

317
    // 初始化樱花特效
318
    function initSakura(config) {
319
      if (globalSakuraManager) {
320
        globalSakuraManager.updateConfig(config);
321
      } else {
322
        globalSakuraManager = new SakuraManager(config);
323
        if (config.enable) {
324
          globalSakuraManager.init();
325
        }
326
      }
327
    }
328

329
    // 樱花特效初始化
330
    (function() {
331
      // 全局标记，确保樱花特效只初始化一次
332
      if (window.sakuraInitialized) {
333
        return;
334
      }
335

336
      // 初始化樱花特效的函数
337
      const setupSakura = () => {
338
        if (sakuraConfig.enable && !window.sakuraInitialized) {
339
          initSakura(sakuraConfig);
340
          window.sakuraInitialized = true;
341
        }
342
      };
343

344
      // 页面加载完成后初始化樱花特效
345
      if (document.readyState === 'loading') {
346
        document.addEventListener('DOMContentLoaded', setupSakura);
347
      } else {
348
        setupSakura();
349
      }
350
    })();
351
  </script>
352
)}
353

354
{sakuraConfig?.enable && sakuraConfig.type === 'css' && (
355
  <div class="sakura-container">
356
    <script define:vars={{ sakuraConfig: config }}>
357
      function createCSSSakura() {
358
        const container = document.querySelector('.sakura-container');
359
        const sakuraCount = sakuraConfig?.sakuraNum || 50;
360

361
        for (let i = 0; i < sakuraCount; i++) {
362
          const sakura = document.createElement('div');
363
          sakura.classList.add('sakura');
364

365
          // 随机大小
366
          const sizes = ['small', 'medium', 'large'];
367
          const size = sizes[Math.floor(Math.random() * sizes.length)];
368
          sakura.classList.add(size);
369

370
          // 随机方向
371
          const directions = ['left', 'center', 'right'];
372
          const direction = directions[Math.floor(Math.random() * directions.length)];
373
          sakura.classList.add(direction);
374

375
          // 随机位置
376
          const startX = Math.random() * 100;
377
          sakura.style.left = `${startX}vw`;
378

379
          // 随机延迟
380
          const delay = Math.random() * 5;
381
          sakura.style.animationDelay = `${delay}s`;
382

383
          // 随机动画时长
384
          const fallDuration = 10 + Math.random() * 20;
385
          const swingDuration = 2 + Math.random() * 3;
386
          sakura.style.setProperty('--fall-duration', `${fallDuration}s`);
387
          sakura.style.setProperty('--swing-duration', `${swingDuration}s`);
388

389
          container.appendChild(sakura);
390
        }
391
      }
392

393
      // 页面加载完成后创建樱花
394
      if (document.readyState === 'loading') {
395
        document.addEventListener('DOMContentLoaded', createCSSSakura);
396
      } else {
397
        createCSSSakura();
398
      }
399
    </script>
400
  </div>
401
)}
402

403

404
<style scoped>
405
/* 樱花容器 */
406
.sakura-container {
407
  position: fixed;
408
  top: 0;
409
  left: 0;
410
  width: 100%;
411
  height: 100%;
412
  pointer-events: none;
413
  z-index: 100;
414
  overflow: hidden;
415
}
416

417
/* 单个樱花 */
418
.sakura {
419
  position: absolute;
420
  width: 10px;
421
  height: 10px;
422
  background: radial-gradient(circle, #ffb3ba 0%, #ff9a9e 100%);
423
  border-radius: 50% 0 50% 0;
424
  opacity: 0;
425
  box-shadow: 0 0 2px rgba(255, 188, 198, 0.8);
426
  filter: blur(0.5px);
427
  top: -20px;
428
  animation:
429
    sakura-fall linear infinite,
430
    sakura-swing ease-in-out infinite,
431
    sakura-fade var(--fade-duration, 5s) forwards;
432
}
433

434
/* 樱花飘落动画 */
435
@keyframes sakura-fall {
436
  to {
437
    transform: translateY(100vh) rotate(360deg);
438
  }
439
}
440

441
/* 樱花摆动动画 */
442
@keyframes sakura-swing {
443
  0%, 100% {
444
    transform: translateX(0) translateY(0) rotate(0deg);
445
  }
446
  25% {
447
    transform: translateX(5px) translateY(calc(25vh)) rotate(90deg);
448
  }
449
  50% {
450
    transform: translateX(0) translateY(calc(50vh)) rotate(180deg);
451
  }
452
  75% {
453
    transform: translateX(-5px) translateY(calc(75vh)) rotate(270deg);
454
  }
455
}
456

457
/* 樱花淡入淡出效果 */
458
@keyframes sakura-fade {
459
  0% {
460
    opacity: 0;
461
  }
462
  10% {
463
    opacity: 0.8;
464
  }
465
  90% {
466
    opacity: 0.6;
467
  }
468
  100% {
469
    opacity: 0;
470
  }
471
}
472

473
/* 不同大小的樱花 */
474
.sakura.small {
475
  width: 6px;
476
  height: 6px;
477
  --fall-duration: 15s;
478
  --swing-duration: 3s;
479
  --fade-duration: 15s;
480
}
481

482
.sakura.medium {
483
  width: 10px;
484
  height: 10px;
485
  --fall-duration: 20s;
486
  --swing-duration: 4s;
487
  --fade-duration: 20s;
488
}
489

490
.sakura.large {
491
  width: 14px;
492
  height: 14px;
493
  --fall-duration: 25s;
494
  --swing-duration: 5s;
495
  --fade-duration: 25s;
496
}
497

498
/* 粉色樱花 */
499
.sakura.pink {
500
  background: radial-gradient(circle, #ffb3ba 0%, #ff9a9e 100%);
501
}
502

503
/* 白色樱花 */
504
.sakura.white {
505
  background: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%);
506
}
507

508
/* 渐变樱花 */
509
.sakura.gradient {
510
  background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
511
}
512

513
/* 樱花飘落方向 */
514
.sakura.left {
515
  animation:
516
    sakura-fall-left var(--fall-duration, 15s) linear infinite,
517
    sakura-swing var(--swing-duration, 3s) ease-in-out infinite,
518
    sakura-fade var(--fade-duration, 15s) forwards;
519
}
520

521
.sakura.right {
522
  animation:
523
    sakura-fall-right var(--fall-duration, 15s) linear infinite,
524
    sakura-swing var(--swing-duration, 4s) ease-in-out infinite,
525
    sakura-fade var(--fade-duration, 15s) forwards;
526
}
527

528
.sakura.center {
529
  animation:
530
    sakura-fall var(--fall-duration, 15s) linear infinite,
531
    sakura-swing var(--swing-duration, 2s) ease-in-out infinite,
532
    sakura-fade var(--fade-duration, 15s) forwards;
533
}
534

535
/* 樱花飘落动画 - 左侧 */
536
@keyframes sakura-fall-left {
537
  to {
538
    transform: translateY(100vh) translateX(-20vw) rotate(360deg);
539
  }
540
}
541

542
/* 樱花飘落动画 - 右侧 */
543
@keyframes sakura-fall-right {
544
  to {
545
    transform: translateY(100vh) translateX(20vw) rotate(360deg);
546
  }
547
}
548

549
/* 樱花飘落动画 - 中间 */
550
@keyframes sakura-fall-center {
551
  to {
552
    transform: translateY(100vh) rotate(360deg);
553
  }
554
}
555
</style>

自定义sakura.css#

这个css写的不是很好，我个人没有用css样式生成的樱花，而是采用canvas图片绘画而成的

1
/* 樱花容器 */
2
.sakura-container {
3
  position: fixed;
4
  top: 0;
5
  left: 0;
6
  width: 100%;
7
  height: 100%;
8
  pointer-events: none;
9
  z-index: 100;
10
  overflow: hidden;
11
}
12

13
/* 单个樱花 */
14
.sakura {
15
  position: absolute;
16
  width: 10px;
17
  height: 10px;
18
  background: radial-gradient(circle, #ffb3ba 0%, #ff9a9e 100%);
19
  border-radius: 50% 0 50% 0;
20
  opacity: 0;
21
  box-shadow: 0 0 2px rgba(255, 188, 198, 0.8);
22
  filter: blur(0.5px);
23
  top: -20px;
24
  animation:
25
    sakura-fall linear infinite,
26
    sakura-swing ease-in-out infinite,
27
    sakura-fade var(--fade-duration, 5s) forwards;
28
}
29

30
/* 樱花飘落动画 */
31
@keyframes sakura-fall {
32
  to {
33
    transform: translateY(100vh) rotate(360deg);
34
  }
35
}
36

37
/* 樱花摆动动画 */
38
@keyframes sakura-swing {
39
  0%, 100% {
40
    transform: translateX(0) translateY(0) rotate(0deg);
41
  }
42
  25% {
43
    transform: translateX(5px) translateY(calc(25vh)) rotate(90deg);
44
  }
45
  50% {
46
    transform: translateX(0) translateY(calc(50vh)) rotate(180deg);
47
  }
48
  75% {
49
    transform: translateX(-5px) translateY(calc(75vh)) rotate(270deg);
50
  }
51
}
52

53
/* 樱花淡入淡出效果 */
54
@keyframes sakura-fade {
55
  0% {
56
    opacity: 0;
57
  }
58
  10% {
59
    opacity: 0.8;
60
  }
61
  90% {
62
    opacity: 0.6;
63
  }
64
  100% {
65
    opacity: 0;
66
  }
67
}
68

69
/* 不同大小的樱花 */
70
.sakura.small {
71
  width: 6px;
72
  height: 6px;
73
  --fall-duration: 15s;
74
  --swing-duration: 3s;
75
  --fade-duration: 15s;
76
}
77

78
.sakura.medium {
79
  width: 10px;
80
  height: 10px;
81
  --fall-duration: 20s;
82
  --swing-duration: 4s;
83
  --fade-duration: 20s;
84
}
85

86
.sakura.large {
87
  width: 14px;
88
  height: 14px;
89
  --fall-duration: 25s;
90
  --swing-duration: 5s;
91
  --fade-duration: 25s;
92
}
93

94
/* 粉色樱花 */
95
.sakura.pink {
96
  background: radial-gradient(circle, #ffb3ba 0%, #ff9a9e 100%);
97
}
98

99
/* 白色樱花 */
100
.sakura.white {
101
  background: radial-gradient(circle, #ffffff 0%, #f0f0f0 100%);
102
}
103

104
/* 渐变樱花 */
105
.sakura.gradient {
106
  background: linear-gradient(45deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
107
}
108

109
/* 樱花飘落方向 */
110
.sakura.left {
111
  animation:
112
    sakura-fall-left var(--fall-duration, 15s) linear infinite,
113
    sakura-swing var(--swing-duration, 3s) ease-in-out infinite,
114
    sakura-fade var(--fade-duration, 15s) forwards;
115
}
116

117
.sakura.right {
118
  animation:
119
    sakura-fall-right var(--fall-duration, 15s) linear infinite,
120
    sakura-swing var(--swing-duration, 4s) ease-in-out infinite,
121
    sakura-fade var(--fade-duration, 15s) forwards;
122
}
123

124
.sakura.center {
125
  animation:
126
    sakura-fall var(--fall-duration, 15s) linear infinite,
127
    sakura-swing var(--swing-duration, 2s) ease-in-out infinite,
128
    sakura-fade var(--fade-duration, 15s) forwards;
129
}
130

131
/* 樱花飘落动画 - 左侧 */
132
@keyframes sakura-fall-left {
133
  to {
134
    transform: translateY(100vh) translateX(-20vw) rotate(360deg);
135
  }
136
}
137

138
/* 樱花飘落动画 - 右侧 */
139
@keyframes sakura-fall-right {
140
  to {
141
    transform: translateY(100vh) translateX(20vw) rotate(360deg);
142
  }
143
}
144

145
/* 樱花飘落动画 - 中间 */
146
@keyframes sakura-fall-center {
147
  to {
148
    transform: translateY(100vh) rotate(360deg);
149
  }
150
}

SakuraEffect.astro组件在src\layouts\MainGridLayout.astro引用

1
import BackToTop from "@components/control/BackToTop.astro";
2
import Footer from "@components/Footer.astro";
3
import Navbar from "@components/Navbar.astro";
4
import SideBar from "@components/widget/SideBar.astro";
5
import SakuraEffect from "@/components/effects/SakuraEffect.astro";
6
import type { MarkdownHeading } from "astro";
7
import { Icon } from "astro-icon/components";
8
import ImageWrapper from "../components/misc/ImageWrapper.astro";
9
import TOC from "../components/widget/TOC.astro";
10
import { siteConfig } from "../config";
11
import {
12
  BANNER_HEIGHT,
13
  BANNER_HEIGHT_EXTEND,
14
  MAIN_PANEL_OVERLAPS_BANNER_HEIGHT,
15
} from "../constants/constants";
16
import Layout from "./Layout.astro";
17

18
// ....省略
19

20

21

22
<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>
23
<!-- 樱花特效 -->
24
<SakuraEffect/>
25
<!-- Navbar -->
26

27
// ....省略

注意事项#

性能影响：樱花特效会消耗一定的 CPU 和内存资源
用户体验：过多的樱花可能影响用户阅读内容
设备兼容：在低性能设备上可能影响页面流畅度
可访问性：动画可能对某些用户造成不适
透明度设置：opacity.min 和 opacity.max 控制樱花的透明度范围
消失速度：fadeSpeed 不应大于 opacity.min，否则樱花可能不会完全消失

常见问题#

Q: 如何禁用樱花特效？ A: 将 enable 设置为 false

Q: 樱花数量多少合适？ A: 建议在 10-30 个之间，根据网站性能调整

Q: 如何调整樱花飘落速度？ A: 修改 speed 配置中的数值，数值越大速度越快

Q: 樱花会影响页面性能吗？ A: 会有一定影响，建议在低性能设备上减少樱花数量

Q: 如何自定义樱花颜色？ A: 通过 CSS 覆盖 .sakura 类的背景样式

Q: 樱花在哪些页面显示？ A: 默认在所有页面显示，可以通过代码控制特定页面显示

Q: 如何调整樱花层级？ A: 修改 zIndex 值，确保樱花在合适的层级显示

Q: 如何调整樱花透明度？ A: 修改 opacity.min 和 opacity.max 值，控制樱花的透明度范围

Q: 樱花消失太快怎么办？ A: 减小 fadeSpeed 的值，让樱花消失得更慢

Q: 樱花不消失怎么办？ A: 确保 fadeSpeed 不大于 opacity.min，否则樱花可能不会完全消失

公告

概述#

前言#