mirror of
https://github.com/handsomezhuzhu/handsomezhuzhu.github.io.git
synced 2026-02-20 20:00:14 +00:00
一些奇怪的更改
This commit is contained in:
@@ -1,204 +1,204 @@
|
||||
# 🎛️ 光标雨点效果参数控制指南
|
||||
|
||||
## 📍 参数控制位置
|
||||
|
||||
### 1. **快速修改** - `docs/.vitepress/theme/index.ts`
|
||||
|
||||
直接在主题文件中自定义参数：
|
||||
|
||||
```typescript
|
||||
// 完全自定义配置
|
||||
const customConfig = {
|
||||
maxDrops: 30, // 🌧️ 雨滴数量 (建议: 10-50)
|
||||
color: 'rgba(173, 216, 230, 0.7)', // 🎨 颜色
|
||||
duration: [1.0, 2.0], // ⏱️ 下落时间范围(秒)
|
||||
dropSize: [3, 8], // 📏 雨滴大小范围(像素)
|
||||
delay: 100, // ⏰ 鼠标移动延迟(毫秒)
|
||||
zIndex: 1000, // 📐 层级
|
||||
enabled: true // 🔄 是否启用
|
||||
}
|
||||
|
||||
const rainEffect = initCursorRainForVitePress(customConfig)
|
||||
```
|
||||
|
||||
### 2. **预设选择** - 使用现有预设
|
||||
|
||||
```typescript
|
||||
// 选择预设
|
||||
const config = rainPresets.fancy // 华丽模式
|
||||
const config = rainPresets.light // 轻量模式
|
||||
const config = rainPresets.pink // 粉色主题
|
||||
const config = rainPresets.green // 绿色主题
|
||||
const config = rainPresets.gold // 金色主题
|
||||
```
|
||||
|
||||
### 3. **预设修改** - `docs/.vitepress/theme/cursor-rain-config.ts`
|
||||
|
||||
创建新预设或修改现有预设：
|
||||
|
||||
```typescript
|
||||
export const rainPresets = {
|
||||
// 添加你的自定义预设
|
||||
myCustom: {
|
||||
maxDrops: 35,
|
||||
color: 'rgba(255, 100, 100, 0.8)',
|
||||
duration: [0.8, 1.5],
|
||||
dropSize: [2, 10],
|
||||
delay: 80,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 修改现有预设
|
||||
default: {
|
||||
maxDrops: 20, // 从25改为20
|
||||
// ... 其他参数
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🎯 详细参数说明
|
||||
|
||||
### 核心参数
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 | 推荐范围 |
|
||||
|------|------|--------|------|----------|
|
||||
| `maxDrops` | number | 25 | 同时显示的最大雨滴数量 | 5-50 |
|
||||
| `color` | string | 'rgba(173,216,230,0.6)' | 雨滴颜色(支持任何CSS颜色) | - |
|
||||
| `duration` | [min,max] | [1.0, 2.0] | 下落时间范围(秒) | [0.5, 3.0] |
|
||||
| `dropSize` | [min,max] | [3, 8] | 雨滴大小范围(像素) | [1, 15] |
|
||||
| `delay` | number | 100 | 鼠标移动到雨滴出现的延迟(毫秒) | 50-300 |
|
||||
|
||||
### 高级参数
|
||||
|
||||
| 参数 | 说明 | 默认值 |
|
||||
|------|------|--------|
|
||||
| `zIndex` | 雨滴容器的层级 | 1000 |
|
||||
| `enabled` | 是否启用效果 | true |
|
||||
| `container` | 效果容器元素 | document.body |
|
||||
|
||||
## 🎨 视觉效果参数
|
||||
|
||||
### 雨滴形状控制 (CSS)
|
||||
|
||||
在 `docs/.vitepress/theme/cursor-rain-styles.css` 中：
|
||||
|
||||
```css
|
||||
.cursor-rain-container .rain-drop {
|
||||
/* 🔸 雨滴形状 - 数值越大越尖锐 */
|
||||
border-radius: 50% 50% 50% 50% / 90% 90% 10% 10% !important;
|
||||
|
||||
/* 🌟 发光效果 */
|
||||
box-shadow: 0 0 6px rgba(173, 216, 230, 0.4);
|
||||
|
||||
/* 🌫️ 模糊效果 */
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
```
|
||||
|
||||
### 雨滴尺寸控制 (JavaScript源码)
|
||||
|
||||
在 `cursor-rain/src/CursorRainEffect.ts` 中：
|
||||
|
||||
```javascript
|
||||
// 第177-178行
|
||||
width: size * 0.3, // 🔸 宽度倍数 (越小越细)
|
||||
height: size * 4, // 🔸 高度倍数 (越大越长)
|
||||
```
|
||||
|
||||
## 🚀 实时调试
|
||||
|
||||
### 浏览器控制台调试
|
||||
|
||||
```javascript
|
||||
// 🔄 更新配置
|
||||
window.rainEffect.updateOptions({
|
||||
maxDrops: 50,
|
||||
color: 'rgba(255, 99, 99, 0.8)',
|
||||
duration: [0.5, 1.0]
|
||||
})
|
||||
|
||||
// ⏸️ 暂停效果
|
||||
window.rainEffect.disable()
|
||||
|
||||
// ▶️ 恢复效果
|
||||
window.rainEffect.enable()
|
||||
```
|
||||
|
||||
### 动态切换主题
|
||||
|
||||
```javascript
|
||||
// 需要先导入switchRainTheme函数
|
||||
import { switchRainTheme } from './cursor-rain-config'
|
||||
|
||||
// 🎨 切换颜色主题
|
||||
switchRainTheme(window.rainEffect, 'pink')
|
||||
switchRainTheme(window.rainEffect, 'green')
|
||||
switchRainTheme(window.rainEffect, 'gold')
|
||||
```
|
||||
|
||||
## 🎛️ 常用调整场景
|
||||
|
||||
### 🐌 性能优化 (减少卡顿)
|
||||
|
||||
```typescript
|
||||
const performanceConfig = {
|
||||
maxDrops: 10, // 减少数量
|
||||
duration: [2.0, 3.0], // 增加时间
|
||||
delay: 200, // 增加延迟
|
||||
dropSize: [2, 4] // 减小尺寸
|
||||
}
|
||||
```
|
||||
|
||||
### 🌪️ 华丽效果 (更多雨滴)
|
||||
|
||||
```typescript
|
||||
const fancyConfig = {
|
||||
maxDrops: 50, // 增加数量
|
||||
duration: [0.5, 1.2], // 减少时间
|
||||
delay: 30, // 减少延迟
|
||||
dropSize: [4, 12] // 增大尺寸
|
||||
}
|
||||
```
|
||||
|
||||
### 📱 移动端优化
|
||||
|
||||
```typescript
|
||||
const mobileConfig = {
|
||||
maxDrops: 8, // 大幅减少
|
||||
duration: [2.5, 4.0], // 增加时间
|
||||
delay: 300, // 增加延迟
|
||||
dropSize: [2, 5] // 减小尺寸
|
||||
}
|
||||
```
|
||||
|
||||
### 🌈 彩色雨滴
|
||||
|
||||
```typescript
|
||||
// 多种颜色随机
|
||||
const colors = [
|
||||
'rgba(255, 99, 99, 0.7)', // 红
|
||||
'rgba(99, 255, 99, 0.7)', // 绿
|
||||
'rgba(99, 99, 255, 0.7)', // 蓝
|
||||
'rgba(255, 255, 99, 0.7)' // 黄
|
||||
]
|
||||
|
||||
// 在JavaScript中需要修改源码来支持随机颜色
|
||||
```
|
||||
|
||||
## 🔧 修改步骤
|
||||
|
||||
1. **选择修改方式**：
|
||||
- 简单调整 → 修改 `index.ts`
|
||||
- 创建预设 → 修改 `cursor-rain-config.ts`
|
||||
- 视觉效果 → 修改 `cursor-rain-styles.css`
|
||||
- 深度定制 → 修改源码 `CursorRainEffect.ts`
|
||||
|
||||
2. **测试效果**：
|
||||
- 保存文件后VitePress会自动热重载
|
||||
- 或在浏览器控制台实时调试
|
||||
|
||||
3. **优化性能**：
|
||||
- 移动端减少 `maxDrops`
|
||||
- 低性能设备增加 `delay` 和 `duration`
|
||||
|
||||
享受你的个性化雨滴效果！🌧️✨
|
||||
# 🎛️ 光标雨点效果参数控制指南
|
||||
|
||||
## 📍 参数控制位置
|
||||
|
||||
### 1. **快速修改** - `docs/.vitepress/theme/index.ts`
|
||||
|
||||
直接在主题文件中自定义参数：
|
||||
|
||||
```typescript
|
||||
// 完全自定义配置
|
||||
const customConfig = {
|
||||
maxDrops: 30, // 🌧️ 雨滴数量 (建议: 10-50)
|
||||
color: 'rgba(173, 216, 230, 0.7)', // 🎨 颜色
|
||||
duration: [1.0, 2.0], // ⏱️ 下落时间范围(秒)
|
||||
dropSize: [3, 8], // 📏 雨滴大小范围(像素)
|
||||
delay: 100, // ⏰ 鼠标移动延迟(毫秒)
|
||||
zIndex: 1000, // 📐 层级
|
||||
enabled: true // 🔄 是否启用
|
||||
}
|
||||
|
||||
const rainEffect = initCursorRainForVitePress(customConfig)
|
||||
```
|
||||
|
||||
### 2. **预设选择** - 使用现有预设
|
||||
|
||||
```typescript
|
||||
// 选择预设
|
||||
const config = rainPresets.fancy // 华丽模式
|
||||
const config = rainPresets.light // 轻量模式
|
||||
const config = rainPresets.pink // 粉色主题
|
||||
const config = rainPresets.green // 绿色主题
|
||||
const config = rainPresets.gold // 金色主题
|
||||
```
|
||||
|
||||
### 3. **预设修改** - `docs/.vitepress/theme/cursor-rain-config.ts`
|
||||
|
||||
创建新预设或修改现有预设：
|
||||
|
||||
```typescript
|
||||
export const rainPresets = {
|
||||
// 添加你的自定义预设
|
||||
myCustom: {
|
||||
maxDrops: 35,
|
||||
color: 'rgba(255, 100, 100, 0.8)',
|
||||
duration: [0.8, 1.5],
|
||||
dropSize: [2, 10],
|
||||
delay: 80,
|
||||
zIndex: 1000
|
||||
} as RainDropOptions,
|
||||
|
||||
// 修改现有预设
|
||||
default: {
|
||||
maxDrops: 20, // 从25改为20
|
||||
// ... 其他参数
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🎯 详细参数说明
|
||||
|
||||
### 核心参数
|
||||
|
||||
| 参数 | 类型 | 默认值 | 说明 | 推荐范围 |
|
||||
|------|------|--------|------|----------|
|
||||
| `maxDrops` | number | 25 | 同时显示的最大雨滴数量 | 5-50 |
|
||||
| `color` | string | 'rgba(173,216,230,0.6)' | 雨滴颜色(支持任何CSS颜色) | - |
|
||||
| `duration` | [min,max] | [1.0, 2.0] | 下落时间范围(秒) | [0.5, 3.0] |
|
||||
| `dropSize` | [min,max] | [3, 8] | 雨滴大小范围(像素) | [1, 15] |
|
||||
| `delay` | number | 100 | 鼠标移动到雨滴出现的延迟(毫秒) | 50-300 |
|
||||
|
||||
### 高级参数
|
||||
|
||||
| 参数 | 说明 | 默认值 |
|
||||
|------|------|--------|
|
||||
| `zIndex` | 雨滴容器的层级 | 1000 |
|
||||
| `enabled` | 是否启用效果 | true |
|
||||
| `container` | 效果容器元素 | document.body |
|
||||
|
||||
## 🎨 视觉效果参数
|
||||
|
||||
### 雨滴形状控制 (CSS)
|
||||
|
||||
在 `docs/.vitepress/theme/cursor-rain-styles.css` 中：
|
||||
|
||||
```css
|
||||
.cursor-rain-container .rain-drop {
|
||||
/* 🔸 雨滴形状 - 数值越大越尖锐 */
|
||||
border-radius: 50% 50% 50% 50% / 90% 90% 10% 10% !important;
|
||||
|
||||
/* 🌟 发光效果 */
|
||||
box-shadow: 0 0 6px rgba(173, 216, 230, 0.4);
|
||||
|
||||
/* 🌫️ 模糊效果 */
|
||||
filter: blur(0.5px);
|
||||
}
|
||||
```
|
||||
|
||||
### 雨滴尺寸控制 (JavaScript源码)
|
||||
|
||||
在 `cursor-rain/src/CursorRainEffect.ts` 中：
|
||||
|
||||
```javascript
|
||||
// 第177-178行
|
||||
width: size * 0.3, // 🔸 宽度倍数 (越小越细)
|
||||
height: size * 4, // 🔸 高度倍数 (越大越长)
|
||||
```
|
||||
|
||||
## 🚀 实时调试
|
||||
|
||||
### 浏览器控制台调试
|
||||
|
||||
```javascript
|
||||
// 🔄 更新配置
|
||||
window.rainEffect.updateOptions({
|
||||
maxDrops: 50,
|
||||
color: 'rgba(255, 99, 99, 0.8)',
|
||||
duration: [0.5, 1.0]
|
||||
})
|
||||
|
||||
// ⏸️ 暂停效果
|
||||
window.rainEffect.disable()
|
||||
|
||||
// ▶️ 恢复效果
|
||||
window.rainEffect.enable()
|
||||
```
|
||||
|
||||
### 动态切换主题
|
||||
|
||||
```javascript
|
||||
// 需要先导入switchRainTheme函数
|
||||
import { switchRainTheme } from './cursor-rain-config'
|
||||
|
||||
// 🎨 切换颜色主题
|
||||
switchRainTheme(window.rainEffect, 'pink')
|
||||
switchRainTheme(window.rainEffect, 'green')
|
||||
switchRainTheme(window.rainEffect, 'gold')
|
||||
```
|
||||
|
||||
## 🎛️ 常用调整场景
|
||||
|
||||
### 🐌 性能优化 (减少卡顿)
|
||||
|
||||
```typescript
|
||||
const performanceConfig = {
|
||||
maxDrops: 10, // 减少数量
|
||||
duration: [2.0, 3.0], // 增加时间
|
||||
delay: 200, // 增加延迟
|
||||
dropSize: [2, 4] // 减小尺寸
|
||||
}
|
||||
```
|
||||
|
||||
### 🌪️ 华丽效果 (更多雨滴)
|
||||
|
||||
```typescript
|
||||
const fancyConfig = {
|
||||
maxDrops: 50, // 增加数量
|
||||
duration: [0.5, 1.2], // 减少时间
|
||||
delay: 30, // 减少延迟
|
||||
dropSize: [4, 12] // 增大尺寸
|
||||
}
|
||||
```
|
||||
|
||||
### 📱 移动端优化
|
||||
|
||||
```typescript
|
||||
const mobileConfig = {
|
||||
maxDrops: 8, // 大幅减少
|
||||
duration: [2.5, 4.0], // 增加时间
|
||||
delay: 300, // 增加延迟
|
||||
dropSize: [2, 5] // 减小尺寸
|
||||
}
|
||||
```
|
||||
|
||||
### 🌈 彩色雨滴
|
||||
|
||||
```typescript
|
||||
// 多种颜色随机
|
||||
const colors = [
|
||||
'rgba(255, 99, 99, 0.7)', // 红
|
||||
'rgba(99, 255, 99, 0.7)', // 绿
|
||||
'rgba(99, 99, 255, 0.7)', // 蓝
|
||||
'rgba(255, 255, 99, 0.7)' // 黄
|
||||
]
|
||||
|
||||
// 在JavaScript中需要修改源码来支持随机颜色
|
||||
```
|
||||
|
||||
## 🔧 修改步骤
|
||||
|
||||
1. **选择修改方式**：
|
||||
- 简单调整 → 修改 `index.ts`
|
||||
- 创建预设 → 修改 `cursor-rain-config.ts`
|
||||
- 视觉效果 → 修改 `cursor-rain-styles.css`
|
||||
- 深度定制 → 修改源码 `CursorRainEffect.ts`
|
||||
|
||||
2. **测试效果**：
|
||||
- 保存文件后VitePress会自动热重载
|
||||
- 或在浏览器控制台实时调试
|
||||
|
||||
3. **优化性能**：
|
||||
- 移动端减少 `maxDrops`
|
||||
- 低性能设备增加 `delay` 和 `duration`
|
||||
|
||||
享受你的个性化雨滴效果！🌧️✨
|
||||
|
||||
Reference in New Issue
Block a user