卡通风格 UI 组件库html (TRIZ UI Kit [特殊字符])

卡通风格 UI 组件库html (TRIZ UI Kit 🧠)

「01-Triz-UI-组件」

链接：https://pan.quark.cn/s/c98af08f4ca2

TRIZ UI Kit 🧠

一个基于 TRIZ 答案之书项目提取的卡通风格 UI 组件库，采用蜡笔小新主题配色。

✨ 特性

🎨 卡通风格设计 - 蜡笔小新主题，色彩鲜明活泼
🧩 丰富的组件 - 按钮、卡片、表单、九宫格等完整组件
🎭 精美动画 - 内置多种 CSS 动画效果
📱 响应式设计 - 完美适配桌面和移动设备
🎯 易于使用 - 简单的类名系统，快速上手
⚡ 零依赖 - 纯 CSS + JavaScript，无需任何框架

🚀 快速开始

方式一：直接使用

下载项目文件
在 HTML 中引入样式和脚本：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的页面</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <!-- 你的内容 -->

    <script src="scripts/main.js"></script>
</body>
</html>

方式二：复制组件

直接复制你需要的组件样式和 HTML 到你的项目中。

📦 组件库

按钮组件

复制代码

<!-- 主要按钮 -->
<button class="tk-btn tk-btn-primary">主要按钮</button>

<!-- 次要按钮 -->
<button class="tk-btn tk-btn-secondary">次要按钮</button>

<!-- 强调按钮 -->
<button class="tk-btn tk-btn-accent">强调按钮</button>

<!-- 不同尺寸 -->
<button class="tk-btn tk-btn-primary tk-btn-small">小按钮</button>
<button class="tk-btn tk-btn-primary tk-btn-large">大按钮</button>

<!-- 带图标 -->
<button class="tk-btn tk-btn-primary">
    <span class="tk-btn-icon">🚀</span>
    <span>开始分析</span>
</button>

卡片组件

复制代码

<div class="tk-card">
    <div class="tk-card-decoration">📝</div>
    <h4 class="tk-card-title">卡片标题</h4>
    <p class="tk-card-desc">卡片描述内容</p>
</div>

表单组件

复制代码

<!-- 输入框 -->
<input type="text" class="tk-input" placeholder="请输入内容...">

<!-- 文本域 -->
<textarea class="tk-textarea" placeholder="请详细描述..."></textarea>

<!-- 标签 -->
<span class="tk-tag">默认标签</span>
<span class="tk-tag tk-tag-primary">主要标签</span>
<span class="tk-tag tk-tag-secondary">次要标签</span>

九宫格组件

复制代码

<div class="tk-grid-container">
    <div class="tk-grid-cell tk-grid-cell-filled">
        <span class="tk-grid-label">过去的超系统</span>
    </div>
    <div class="tk-grid-cell">
        <span class="tk-grid-label">过去的系统</span>
    </div>
    <!-- 更多单元格... -->
    <div class="tk-grid-cell tk-grid-center">
        <span class="tk-grid-label">核心<br>问题</span>
    </div>
</div>

步骤指示器

复制代码

<div class="tk-steps-container">
    <div class="tk-step tk-step-active">
        <div class="tk-step-circle">1</div>
        <div class="tk-step-line"></div>
    </div>
    <div class="tk-step tk-step-completed">
        <div class="tk-step-circle">2</div>
        <div class="tk-step-line"></div>
    </div>
    <div class="tk-step">
        <div class="tk-step-circle">3</div>
    </div>
</div>

进度条

复制代码

<div class="tk-progress">
    <div class="tk-progress-bar" style="width: 60%"></div>
</div>

动画效果

复制代码

<!-- 弹跳动画 -->
<div class="tk-box tk-animate-bounce">Bounce</div>

<!-- 摆动动画 -->
<div class="tk-box tk-animate-wiggle">Wiggle</div>

<!-- 浮动动画 -->
<div class="tk-box tk-animate-float">Float</div>

<!-- 脉冲动画 -->
<div class="tk-box tk-animate-pulse">Pulse</div>

🎨 主题变量

组件库使用 CSS 变量，方便自定义：

复制代码

:root {
    /* 核心配色 */
    --tk-primary: #FF6B9D;
    --tk-secondary: #FFD93D;
    --tk-accent: #4ECDC4;

    /* 背景色 */
    --tk-bg-light: #FFF9F0;
    --tk-bg-main: #FFF5E6;
    --tk-bg-card: #FFFFFF;

    /* 文字色 */
    --tk-text-primary: #2D1B4E;
    --tk-text-secondary: #6B5B95;

    /* 圆角 */
    --tk-radius-sm: 12px;
    --tk-radius-md: 20px;
    --tk-radius-lg: 30px;
    --tk-radius-xl: 50px;
}

🔧 JavaScript API

组件库提供了 JavaScript API 来增强交互：

复制代码

// 自动初始化（默认）
// 页面加载后会自动执行

// 手动初始化
window.TrizUIKit.init();

// 单独初始化特定组件
window.TrizUIKit.components.buttons();  // 初始化按钮
window.TrizUIKit.components.cards();    // 初始化卡片
window.TrizUIKit.components.grid();     // 初始化九宫格

// 工具函数
window.TrizUIKit.utils.addClass(element, 'tk-animate-pop');
window.TrizUIKit.utils.removeClass(element, 'tk-animate-pop');
window.TrizUIKit.utils.toggleClass(element, 'tk-selected');

📁 项目结构

复制代码

Triz-UI-Kit/
├── index.html          # 组件展示页面
├── package.json        # 项目配置
├── README.md          # 使用文档
└── styles/
    └── main.css       # 主样式文件
└── scripts/
    └── main.js        # 主JavaScript文件

🎯 核心特性

1. 卡通风格设计

蜡笔小新主题配色
圆润可爱的视觉风格
活泼的动画效果

2. 完整的组件系统

按钮（多种样式和尺寸）
卡片（可交互）
表单元素
九宫格布局
步骤指示器
进度条
标签

3. 丰富的动画库

弹跳 (bounce)
摆动 (wiggle)
浮动 (float)
脉冲 (pulse)
弹出 (pop)

4. 响应式设计

完美适配桌面、平板、手机
移动端优化的触摸交互

💡 使用示例

创建一个简单的表单页面

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div class="tk-main">
        <h1 class="tk-section-title">问题反馈</h1>

        <div class="tk-form-group">
            <input type="text" class="tk-input" placeholder="您的姓名">
        </div>

        <div class="tk-form-group">
            <textarea class="tk-textarea" placeholder="请描述您的问题"></textarea>
        </div>

        <button class="tk-btn tk-btn-primary">提交反馈</button>
    </div>

    <script src="scripts/main.js"></script>
</body>
</html>

创建一个功能卡片展示

复制代码

<div class="tk-component-showcase">
    <div class="tk-card">
        <div class="tk-card-decoration">📝</div>
        <h4 class="tk-card-title">九宫格结构化</h4>
        <p class="tk-card-desc">AI引导式问卷，智能挖掘问题背景</p>
    </div>

    <div class="tk-card">
        <div class="tk-card-decoration">💡</div>
        <h4 class="tk-card-title">矛盾自动提取</h4>
        <p class="tk-card-desc">自动识别内在冲突，转化创新方向</p>
    </div>
</div>

🌈 颜色方案

组件库采用蜡笔小新主题配色：

主色：粉色 (#FF6B9D) - 活力与温暖
辅色：黄色 (#FFD93D) - 快乐与创意
强调色：青绿色 (#4ECDC4) - 清新与和谐
背景：米色渐变 - 温馨舒适

📱 浏览器支持

Chrome (推荐)
Firefox
Safari
Edge
移动端浏览器

🤝 贡献

欢迎提交问题和改进建议！

📄 许可证

MIT License

🎉 致谢

本项目从 TRIZ 答案之书项目中提取 UI 组件独立而成。

TRIZ UI Kit - 让开发更有趣！ 🚀