6. 樱花特效配置指南
413 字
2 分钟
6. 樱花特效配置指南
樱花特效配置指南
配置文件位置
src/config/sakuraConfig.ts
基本配置
export const sakuraConfig: SakuraConfig = { // 是否启用樱花特效 enable: true,
// 樱花数量 sakuraNum: 21,
// 樱花越界限制次数，-1为无限循环 limitTimes: -1,}启用/禁用樱花特效
// 启用enable: true,
// 禁用enable: false,樱花数量配置
// 樱花数量sakuraNum: 21, // 数量越多，性能消耗越大樱花尺寸配置
size: { // 樱花最小尺寸倍数 min: 0.5, // 樱花最大尺寸倍数 max: 1.1,},樱花透明度配置
opacity: { // 樱花最小不透明度 min: 0.3, // 樱花最大不透明度 max: 0.9,},樱花速度配置
speed: { // 水平移动 horizontal: { // 水平移动速度最小值 min: -1.7, // 水平移动速度最大值 max: -1.2, }, // 垂直移动 vertical: { // 垂直移动速度最小值 min: 1.5, // 垂直移动速度最大值 max: 2.2, }, // 旋转速度 rotation: 0.03, // 消失速度，不应大于最小不透明度 fadeSpeed: 0.03,},层级配置
// 层级，确保樱花在合适的层级显示zIndex: 100,常见问题
Q: 樱花特效不显示？
- 检查
enable是否设置为true - 检查浏览器控制台是否有错误
- 尝试刷新页面或清除缓存
Q: 如何减少性能消耗？
- 减少
sakuraNum数量 - 增大樱花尺寸（尺寸大，数量可以减少）
Q: 樱花挡住内容怎么办？
调整 zIndex 值，确保樱花在内容下方：
zIndex: 100, // 值越小，层级越低Q: 如何让樱花只飘落有限次数？
修改 limitTimes：
limitTimes: 5, // 飘落5次后停止支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
相关文章 智能推荐
1
12. 字体配置指南
博客搭建 博客字体配置教程，包含内置字体选择、自定义字体添加、字体加载优化等详细设置。
2
9. 看板娘配置指南
博客搭建 博客看板娘配置教程，支持 Spine 和 Live2D 两种模型，包含位置、大小、交互等详细配置。
3
16. 国际化配置指南
博客搭建 博客国际化配置教程，包含多语言支持、翻译管理、语言切换、SEO优化等详细设置。
4
13. 搜索功能配置指南
博客搭建 博客搜索功能配置教程，包含内置PageFind搜索、搜索框设置、搜索结果优化等详细设置。
5
11. 主题颜色配置指南
博客搭建 博客主题颜色配置教程，包含主色调、深色模式、固定模式等详细设置。
随机文章 随机推荐
评论区
Hi，欢迎来到 Coldairboy学习笔记。
音乐
暂未播放
0:00 0:00
31
3
5
36,702
0 天
0 天前