spa/.claude/skills/drawnote/styles/彩色手写笔记风格.md

# 彩色手写笔记风格模板

## 风格特点

这是一个模拟真实手写笔记的信息图风格，特点包括：
- 🎨 **多种颜色笔标注** - 红、蓝、绿、橙、紫、粉6种颜色
- 🖍️ **荧光笔高亮** - 5种荧光笔颜色高亮重点
- ✏️ **手写字体** - 使用类手写的友好字体
- 📓 **笔记本效果** - 带横线的笔记本背景
- 📌 **便签纸** - 不同颜色的便签效果
- 🎯 **多样标注** - 圆圈、下划线、时间线等

## 适用场景

- 📚 学习笔记整理
- 📖 读书笔记总结
- 🎓 知识体系梳理
- 💡 概念讲解图表
- 📝 课程内容总结

## CSS样式模板

### 基础设置

```css
/* 使用系统可用字体，避免外部加载 */
body {
    font-family: 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.8;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 40px;
}

.container {
    background: #fffff8;
    /* 笔记本横线效果 */
    background-image:
        repeating-linear-gradient(
            transparent,
            transparent 31px,
            #e5e5e5 31px,
            #e5e5e5 32px
        );
    border-radius: 10px;
    padding: 60px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* 笔记本左侧红线 */
.container::before {
    content: '';
    position: absolute;
    left: 80px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffcccc;
}
```

### 颜色笔标注

```css
/* 不同颜色的笔标注 */
.red-pen {
    color: #e74c3c;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(231, 76, 60, 0.3);
}

.blue-pen {
    color: #3498db;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(52, 152, 219, 0.3);
}

.green-pen {
    color: #27ae60;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(39, 174, 96, 0.3);
}

.orange-pen {
    color: #f39c12;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(243, 156, 18, 0.3);
}

.purple-pen {
    color: #9b59b6;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(155, 89, 182, 0.3);
}

.pink-pen {
    color: #e91e63;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(233, 30, 99, 0.3);
}
```

### 荧光笔高亮

```css
/* 荧光笔高亮效果 - 从60%开始，到85%结束，模拟真实荧光笔 */
.highlight-yellow {
    background: linear-gradient(180deg, transparent 60%, #fff176 60%, #fff176 85%, transparent 85%);
    padding: 2px 4px;
    font-weight: 600;
}

.highlight-green {
    background: linear-gradient(180deg, transparent 60%, #aed581 60%, #aed581 85%, transparent 85%);
    padding: 2px 4px;
    font-weight: 600;
}

.highlight-pink {
    background: linear-gradient(180deg, transparent 60%, #f48fb1 60%, #f48fb1 85%, transparent 85%);
    padding: 2px 4px;
    font-weight: 600;
}

.highlight-blue {
    background: linear-gradient(180deg, transparent 60%, #81d4fa 60%, #81d4fa 85%, transparent 85%);
    padding: 2px 4px;
    font-weight: 600;
}

.highlight-orange {
    background: linear-gradient(180deg, transparent 60%, #ffab91 60%, #ffab91 85%, transparent 85%);
    padding: 2px 4px;
    font-weight: 600;
}
```

### 手写下划线

```css
/* 手写下划线效果 */
.underline-wavy {
    text-decoration: underline wavy #e74c3c;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.underline-double {
    border-bottom: 3px double #3498db;
    padding-bottom: 2px;
}
```

### 手写圆圈标注

```css
/* 手写圆圈标注 */
.circle-mark {
    display: inline-block;
    border: 3px solid #e74c3c;
    border-radius: 50%;
    padding: 5px 12px;
    margin: 0 5px;
    font-weight: bold;
}
```

### 手写字体系列

```css
/* 不同字体样式 - 使用系统字体 */
.font-handwriting {
    font-family: 'Brush Script MT', 'Comic Sans MS', cursive;
    font-size: 1.2em;
    line-height: 1.4;
}

.font-marker {
    font-family: 'Impact', 'Arial Black', 'Comic Sans MS', cursive;
    letter-spacing: 1px;
}

.font-indie {
    font-family: 'Bradley Hand', 'Comic Sans MS', cursive;
    font-size: 1.1em;
}

.font-patrick {
    font-family: 'Chalkboard', 'Comic Sans MS', cursive;
    font-size: 1.1em;
}
```

### 便签纸效果

```css
/* 便签纸效果 */
.sticky-note {
    background: #fef9c7;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    transform: rotate(-2deg);
    font-family: 'Chalkboard', 'Comic Sans MS', cursive;
    font-size: 18px;
    border-top: 30px solid #f9e79f;
    position: relative;
}

.sticky-note::before {
    content: '📌';
    position: absolute;
    top: -25px;
    right: 20px;
    font-size: 24px;
}

.sticky-note.blue {
    background: #d6eaf8;
    border-top-color: #85c1e9;
}

.sticky-note.pink {
    background: #fadbd8;
    border-top-color: #f1948a;
}

.sticky-note.green {
    background: #d5f4e6;
    border-top-color: #82e0aa;
}
```

### 卡片样式

```css
/* 卡片样式 */
.card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 3px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

/* 卡片右上角的小圆点装饰 */
.card::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #ffd54f;
    opacity: 0.3;
    border-radius: 50%;
}

.card:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 不同颜色边框的卡片 */
.card.red-border { border-color: #e74c3c; }
.card.blue-border { border-color: #3498db; }
.card.green-border { border-color: #27ae60; }
.card.purple-border { border-color: #9b59b6; }
.card.orange-border { border-color: #f39c12; }
```

### 时间线设计

```css
/* 时间线样式 */
.timeline {
    position: relative;
    padding: 30px 0;
    margin: 40px 0;
}

/* 彩色渐变时间线 */
.timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #e74c3c, #3498db, #27ae60, #f39c12, #9b59b6);
}

.timeline-marker {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 24px;
    font-family: 'Impact', 'Arial Black', cursive;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.timeline-marker.red {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.timeline-marker.blue {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.timeline-marker.green {
    background: linear-gradient(135deg, #27ae60, #229954);
}
```

### 重点标记框

```css
/* 重点标记框 */
.important-box {
    background: linear-gradient(135deg, #fff5f5, #ffe5e5);
    border: 4px solid #e74c3c;
    border-radius: 15px;
    padding: 30px;
    margin: 30px 0;
    position: relative;
    box-shadow: 0 5px 20px rgba(231, 76, 60, 0.2);
}

.important-box::before {
    content: '⭐ 重点';
    position: absolute;
    top: -18px;
    left: 30px;
    background: #e74c3c;
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-family: 'Impact', 'Arial Black', cursive;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
```

### 技术标签

```css
/* 技术标签 */
.tech-tag {
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Bradley Hand', 'Comic Sans MS', cursive;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.tech-tag:hover {
    transform: scale(1.1) rotate(-3deg);
}

.tech-tag.red {
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
}

.tech-tag.blue {
    background: linear-gradient(135deg, #4ecdc4, #44a8b3);
    color: white;
}

.tech-tag.green {
    background: linear-gradient(135deg, #95e1d3, #7ececa);
    color: #2d3436;
}

.tech-tag.yellow {
    background: linear-gradient(135deg, #ffe66d, #f9ca24);
    color: #2d3436;
}

.tech-tag.purple {
    background: linear-gradient(135deg, #a29bfe, #6c5ce7);
    color: white;
}

.tech-tag.orange {
    background: linear-gradient(135deg, #fdcb6e, #e17055);
    color: white;
}
```

## 使用示例

### HTML结构示例

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>彩色手写笔记</title>
    <style>
        /* 在这里引入上面的CSS样式 */
    </style>
</head>
<body>
    <div class="container">
        <!-- 重点内容 -->
        <div class="important-box">
            <h4>核心概念</h4>
            <p class="font-handwriting">
                <span class="red-pen">关键术语</span> =
                <span class="highlight-yellow">重点内容</span> +
                <span class="highlight-green">核心思想</span>
            </p>
        </div>

        <!-- 便签纸 -->
        <div class="sticky-note blue">
            <p class="font-patrick">
                这是一个<span class="blue-pen">蓝色便签</span>，
                用于记录<span class="highlight-pink">补充信息</span>
            </p>
        </div>

        <!-- 卡片 -->
        <div class="card red-border">
            <h3><span class="red-pen">主题标题</span></h3>
            <ul class="font-indie">
                <li><span class="red-pen">要点1</span> - 详细说明</li>
                <li><span class="blue-pen">要点2</span> - 详细说明</li>
                <li><span class="green-pen">要点3</span> - 详细说明</li>
            </ul>
        </div>

        <!-- 时间线 -->
        <div class="timeline">
            <div class="timeline-item">
                <div class="timeline-marker red">1</div>
                <div class="timeline-content">
                    <h4 class="red-pen">第一步</h4>
                    <p class="font-indie">步骤描述...</p>
                </div>
            </div>
        </div>

        <!-- 技术标签 -->
        <div class="tech-tags">
            <span class="tech-tag red">标签1</span>
            <span class="tech-tag blue">标签2</span>
            <span class="tech-tag green">标签3</span>
        </div>
    </div>
</body>
</html>
```

## 颜色使用指南

### 颜色笔的语义

- 🔴 **红色笔** - 最重要的概念、警告、需要特别注意的内容
- 🔵 **蓝色笔** - 技术术语、方法名称、专业名词
- 🟢 **绿色笔** - 优势、正面特性、成功案例
- 🟠 **橙色笔** - 步骤、流程、中等重要度内容
- 🟣 **紫色笔** - 高级概念、未来趋势、创新内容
- 🌸 **粉色笔** - 特殊提示、补充说明、相关链接

### 荧光笔的语义

- 💛 **黄色荧光笔** - 核心概念、定义、最重要的信息
- 💚 **绿色荧光笔** - 关键优势、重要特性
- 💗 **粉色荧光笔** - 数据、参数、量化指标
- 💙 **蓝色荧光笔** - 技术特点、方法步骤
- 🧡 **橙色荧光笔** - 实践建议、操作要点

## 最佳实践

1. **层次分明** - 使用不同颜色区分不同层级的内容
2. **适度使用** - 不要过度使用颜色，保持视觉平衡
3. **一致性** - 同类内容使用相同颜色
4. **对比度** - 确保文字和背景有足够的对比度
5. **可读性** - 优先考虑内容的可读性，而非装饰性

## 适配建议

### 响应式设计

```css
@media (max-width: 768px) {
    .container {
        padding: 30px 20px;
    }

    .card {
        padding: 20px;
    }

    .timeline::before {
        left: 15px;
    }

    .timeline-marker {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}
```

### 打印样式

```css
@media print {
    body {
        background: white;
    }

    .container {
        box-shadow: none;
        background: white;
    }

    .card:hover {
        transform: none;
    }
}
```

## 风格变体

可以通过调整以下参数创建不同的变体：

1. **配色方案** - 更换主题色
2. **字体大小** - 调整整体字号
3. **间距** - 增加或减少留白
4. **圆角** - 调整圆角弧度
5. **阴影** - 调整阴影深度

---

**创建日期**：2025-11-10
**版本**：1.0
**作者**：Claude Code + infopic-skill