12 KiB

Raw Permalink Blame History

彩色手写笔记风格模板

风格特点

这是一个模拟真实手写笔记的信息图风格，特点包括：

🎨 多种颜色笔标注 - 红、蓝、绿、橙、紫、粉6种颜色
🖍️ 荧光笔高亮 - 5种荧光笔颜色高亮重点
✏️ 手写字体 - 使用类手写的友好字体
📓 笔记本效果 - 带横线的笔记本背景
📌 便签纸 - 不同颜色的便签效果
🎯 多样标注 - 圆圈、下划线、时间线等

适用场景

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

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;
}

颜色笔标注

/* 不同颜色的笔标注 */
.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);
}

荧光笔高亮

/* 荧光笔高亮效果 - 从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;
}

手写下划线

/* 手写下划线效果 */
.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;
}

手写圆圈标注

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

手写字体系列

/* 不同字体样式 - 使用系统字体 */
.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;
}

便签纸效果

/* 便签纸效果 */
.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;
}

卡片样式

/* 卡片样式 */
.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; }

时间线设计

/* 时间线样式 */
.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);
}

重点标记框

/* 重点标记框 */
.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);
}

技术标签

/* 技术标签 */
.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结构示例

<!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>

颜色使用指南

颜色笔的语义

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

荧光笔的语义

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

最佳实践

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

适配建议

响应式设计

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

    .card {
        padding: 20px;
    }

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

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

打印样式

@media print {
    body {
        background: white;
    }

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

    .card:hover {
        transform: none;
    }
}

风格变体

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

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

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

12 KiB Raw Permalink Blame History Unescape Escape

彩色手写笔记风格模板

风格特点

适用场景

CSS样式模板

基础设置

颜色笔标注

荧光笔高亮

手写下划线

手写圆圈标注

手写字体系列

便签纸效果

卡片样式

时间线设计

重点标记框

技术标签

使用示例

HTML结构示例

颜色使用指南

颜色笔的语义

荧光笔的语义

最佳实践

适配建议

响应式设计

打印样式

风格变体

12 KiB

Raw Permalink Blame History