四 角 铆 钉 装 饰
墨 落 宣 纸
东 方 美 学
汉
朱红印章、水墨笔触、宣纸质感、书法章法
让千年中华文化在网页上优雅绽放
汉之印
· 布局系统 ·
布 局 章 法
中国画论：开合、虚实、疏密 — 转化为可用的 CSS 布局类
han-layout-painting · 七三开
画 面 主 体 七 分
题 款 三 分
han-layout-golden · 黄金分割
主 体 六 一 八
副 体 三 八 二
han-layout-couplet · 对联
上 联
下 联
han-layout-sparse · 疏朗
远 山
淡 云
孤 松
han-layout-dense · 密致
密
致
紧
凑
han-void · 留白呼吸
此 处 留 白
han-layout-hall · 中堂布局
墨 香 千 秋 意 韵 流
翰 墨 斋
中 间 主 画
对 联 配 画 · 中 堂 布 局
汉 风 千 载 意 韵 长
· 标志性组件 ·
中 国 符 号
卷轴、匾额、折扇、屏风、灯笼、册页、封面 — 千年文化的网页化表达
卷轴 · han-scroll
卷轴内容
迷你卷轴 · han-scroll--sm
迷你
纸质卷轴 · han-scroll--paper
纸质纹理
竖卷轴 · han-scroll--vertical
汉 风 画 谱
匾额变体
品 名
金 匾
雅 斋
竖匾 · han-plaque--vertical
墨 香
折扇 · han-fan--spread
山水
扇 面 书 画
屏风 · han-screen
左 屏
侧 栏 内 容
中 间 主 屏
主 内 容 展 示
右 屏
侧 栏 内 容
灯笼组 · han-lantern-group
福
禄
寿
册页 · han-album
文 集
古籍风格封面
珍
装布册页 · han-album--cloth
画 谱
布 面 封 装
藏
中式封面 · han-cover
书 名
史 集
文 选
· 按钮系统 ·
朱 印 为 记
印章按钮、水墨按钮、次要按钮、涟漪效果
印章按钮变体
动画印章 / 涟漪效果
水墨 / 次要 / 通用
按钮组 · han-btn-group
· 表单元素 ·
水 墨 输 入
水墨底纹输入框、下拉选择、日期选择、文件上传
基础 / 水墨输入
表单分组
下拉选择 · han-select
选 择 一 项▼
日期选择 · han-date-picker
2026年 7月
日
一
二
三
四
五
六
15
16
17
18
文件上传 · han-upload
拖 入 或 点 击 上 传 文 件
支 持 JPG / PNG / PDF 等格式
· 卡片与边框 ·
宣 纸 文 章
卡片变体、窗花边框、印章相框、画廊、图片滤镜
卡片变体
基 础 卡 片
宣 纸 白 底
纸 质 卡 片
宣 纸 纹 理
装 饰 卡 片
金 边 装 饰
水 墨 卡 片
墨 色 深 层
图 案 卡 片
云 纹 浅 底
卷轴卡片 · han-card-scroll
窗花边框 · han-frame-window
品 名
墨 落 宣 纸 见 汉 风
相框变体
印 章
金 框
纸 框
框架 · han-frame
画 框
卷 轴 框
木 框
图片滤镜 · han-filter-ink / sepia / sung
墨 色 滤 镜
han-filter-ink
复 古 滤 镜
han-filter-sepia
宋 风 滤 镜
han-filter-sung
水墨画廊 · han-gallery
山 水 画
人 物 画
花 鸟 画
书 法
扇 面
卷 轴
· 印章与标签 ·
朱 红 印 记
印章变体
汉
巨 匠
小
墨
珍 品
方
多字印章 / 印章组
汉 之 印
汉
设
计
印
印章文字
珍 品
雅 集
藏 印
圆
大 字
古 旧
标签 / 徽章 / 印章徽章
默 认
朱 红
金 色
描 边
3
官 方
金 质
墨 印
圆 章
· 文字装饰 ·
书 法 章 法
书法笔触标题
墨 落 宣 纸
带印章标题
笔 走 龙 蛇印
对联 · han-couplet
海 内 存 知 己
印
天 涯 若 比 邻
毛笔签名 · han-signature
李 白
青 莲
古典引用 · han-classical-quote
墨 落 宣 纸 见 汉 风，笔 走 龙 蛇 绘 古 今。—— 汉
居中美诗 · han-poem-centered
山 居 秋 暝
空 山 新 雨 后，天 气 晚 来 秋。
明 月 松 间 照，清 泉 石 上 流。
— 王 维
墨块 / 金块 / 朱块
墨
金
朱
标题组 / 批注
主 标 题
副 标 题 说 明 文 字
这 是 一 段 批注 注 释 的 文 字
· 中国风图标 ·
图 标 库
印章、毛笔、莲花、祥云、山水、四君子、茶具、古典符号
文化图标 · han-icon (ink / vermilion / gold / light 变体)
印章
圆印
御印
毛笔
笔架
砚台
宣纸
墨条
莲花
祥云
山水
松
竹
梅
菊
灯笼
折扇
茶壶
古琴
围棋
竹简
宝塔
万字
回纹
太极
铜钱
印章标记
点饰
· 传统图案 ·
纹 样 之 美
回纹、云纹、冰裂纹、缠枝纹、万字纹 — 传统纹样装饰
图案背景
回 纹
云 纹
冰 裂
独立图案类
回 纹
云 纹
冰 裂
缠 枝
万 字
渐变背景
墨 色
天 青
朱 红
金 辉
宣 纸
青 瓷
靛 青
装饰条带 · 图案叠加
天 青 云 纹
墨 冰 裂 纹
金 缠 枝
图案边框装饰 · han-pattern-*-border
云 纹 边 框
回 纹 边 框
· 水墨分割 ·
笔 墨 之 间
水墨分割线
毛笔分割线
· 数据展示 ·
条 理 分 明
面包屑、步骤条、时间线、分页器、评分、树形目录
中式面包屑 · han-breadcrumb
步骤条 · han-steps
1
选 择 主 题
2
配 置 组 件
3
预 览 效 果
4
发 布 上 线
时间线 · han-timeline
唐 · 618-907
盛 世 气 象
金 碧 辉 煌，雍 容 华 美
宋 · 960-1279
清 雅 简 极
汝 窑 天 青，冰 裂 纹 理
明 · 1368-1644
庄 重 典 雅
分页器 · 印章 & 增强
...
共 128 条
星级评分
树形目录 · han-tree
-
▾设 计 系 统
- 色 彩 系 统
- 字 体 系 统
-
▸组 件 库
· 高级组件 ·
功 能 组 件
标签页、表格、模态框、手风琴、进度条、头像、价格、加载、空状态、骨架屏
水墨标签页 · han-tabs
这 里 是 总 览 内 容 区 域，使 用 水 墨 触 笔 风 格 的 指 示 器。
手风琴 · han-accordion
这 是 第 一 项 内 容，使 用 卷 轴 动 画 展 开。
进度条 · han-progress
墨 色 进 度
朱 印 进 度
金 辉 进 度
头像 · han-avatar
墨
汉
设
价格标签 · han-price-tag
¥188/ 幅
¥288
中式表格 · han-table
| 序 号 | 名 称 | 朝 代 | 价 格 | 状 态 |
|---|---|---|---|---|
| 01 | 汉 风 画 册 | 宋 | ¥ 128 | 在 售 |
| 02 | 水 墨 卷 轴 | 唐 | ¥ 388 | 限 量 |
| 03 | 诗 词 名 篇 | 明 | ¥ 68 | 现 货 |
模态框 · han-modal (展示结构)
墨 成 斋 提 示
感 谢 您 使 用 汉，本 系 统 致 力 于 将 中 国 传 统 美 学 现 代 化。
加载 & 空状态
暂 无 数 据
骨架屏 · han-skeleton
· 增强组件 ·
增 强 版 组 件
印章评分、空状态变体、骨架卡片、水墨加载、全页加载、石画画廊
增强版评分 · han-rating-enhanced
空状态变体 · no-data / no-search / error
暂 无 资 料
未 找 到 结 果
出 错 了
骨架屏卡片 · han-skeleton-card
水墨加载变体 · seal / text
加 载 中...
全页加载遮罩 · han-loading-overlay
石画画廊 · han-gallery--masonry
山 水 画
人 物 画
花 鸟 画
书 法
扇 面
卷 轴
· 动 效 ·
墨 迹 动 效
墨迹扩散、悬停提升、笔写入场、印章落下、涟漪扩散
han-hover-ink · 墨迹扩散悬停
悬 停 此 处 观 墨 迹 扩 散
han-hover-lift · 提升悬停
悬 停 提 升 效 果
han-scroll-unroll · 卷轴展开
展 开 的 卷 轴 内 容，适 用 于 FAQ 或 内 容 收 展。
笔写路径 · han-brush-path
笔 写 入 场 标 题
滚动触发 · han-reveal 系列
淡 入
左 入
缩 放
墨 迹
印 章
墨动边框 · han-border-ink
悬 停 显 示 墨 色 动 态 边 框
· 进阶动效 ·
墨 迹 动 画
卷轴展开入场、毛笔书写入场、云烟飘入、印章震动/全动画、涟漪朱红/多点
更多滚动入场 · scroll / brush / cloud
卷 轴 展 开
毛 笔 入 场
云 烟 飘 入
右 侧 入 场
印章震动 / 全动画 · shake / full-anim
震
落
涟漪变体 · vermilion / multi
朱 红 涟 漪
多 点 涟 漪
悬停变体 · tilt / vermilion cursor-glow
倾 斜 提 升
朱 红 光 晕
笔写路径动画 · animate-draw / animate-fill
动画控制工具类
han-no-animation
han-animate-infinite
han-animate-slow
han-animate-fast
han-delay-100
han-delay-300
han-delay-500
han-reveal-delay-1
han-reveal-delay-3
han-reveal-delay-5
· 环境动效 ·
环 境 意 境
花瓣飘落、烟雾飘渺、灯笼摇晃、水墨视差 — 营造东方意境
花瓣飘落 · han-petal-fall
烟雾飘渺 · han-smoke
炉 香 袅 袅
灯笼摇晃 · han-lantern-sway
福
禄
寿
水墨视差 · han-parallax / --subtle / --ink
天 青 视 差
墨 色 视 差
宣 纸 视 差
综合环境场景 · 灯笼 + 烟雾 + 花瓣
· 建筑结构元素 ·
瓦 当 藻 井
瓦当滴水、藻井天花、变体屏风、灯笼变体 — 呈现古典建筑之美
瓦当 · han-tile
屋 檐 瓦 当
藻井 · han-ceiling
藻 井
屏风变体 · han-screen--six
一
山
二
三
水
四
屏风山水图 · han-screen__painting
远 山 如 黛
灯笼变体 · lg / sm / gold
小
中
大
金
匾额变体 · lg / shine / seal
翰 墨 汉 风
光 泽 匾 额
带 印 之 匾
印
瓦当 + 藻井组合
· 装饰角花与边框 ·
装 饰 角 花
云纹角花、回纹角花、窗花边框、卷轴框、相框
云纹角花 · han-corner-cloud
云 纹 边 框
回纹角花 · han-corner-huiwen
回 纹 角 花
相框组合 · seal / gold / paper
印 章 框
金 框
纸 框
框架变体 · scroll / wood
卷 轴 框
木 框
窗花灯罩式卡片组
梅
傲 霜 凌 雪
兰
幽 谷 清 香
竹
虚 心 有 节
菊
傲 霜 秋 菊
· 高级文字与布局 ·
行 文 布 局
对联横版、诗集竖版、标题组注解、印章签名、中堂匾额、左右平衡
横版对联 · han-couplet--horizontal
山 水 有 情 皆 入 画
印
风 云 无 意 自 成 章
小型对联 · han-couplet--sm
墨 香 千 秋
雅
汉 风 千 载
竖版诗集 · han-poem-vertical
床 前 明 月 光，
疑 是 地 上 霜。
举 头 望 明 月，
低 头 思 故 乡。
标题注解组 · han-title-group + han-annotation
主 要 篇 目
第 一 章 · 汉 风 画 谱
Chapter 1 · Han
文 中 朱 印 为 证 之 处，皆 为 典 籍 所 引。
带线标题组 · han-title-group--lined
画 作 赏 析
名 家 真 迹 · 一 览 无 余
大号签名 · han-signature--lg
苏 东 坡
轼
左右平衡布局 · han-balance-left / han-balance-right
左 侧 题 款
画 面 左 侧 落 款，保 持 右 方 留 白，体 现 中 国 画 构 图 的 虚 实 之 美。
右 侧 印 章
朱 红 印 章 钤 于 右 下 角，形 成 墨 与 印 的 对 比，富 有 节 奏 感。
散点布局 · han-layout-varied
松
山
石
泉
亭
舟
交替布局 · han-alternating
甲 · 墨
乙 · 朱
丙 · 金
丁 · 青
· 高级动效交互 ·
动 态 中 国 风
墨迹悬停变体、印章冲击、笔画写字、涟漪扩散、标题笔写入场
悬停墨迹变体 · vermilion / gold
朱 红 墨 迹
金 色 墨 迹
印章冲击 & 涟漪扩散
涟 漪 墨 纹
笔写路径 · 标题笔写入场
笔 墨 入 场 标 题
边框动效 · 朱砂墨线
悬 停 显 示 朱 砂 动 态 边 框
图片缩放 / 淡入
缩 放
淡 入
光标光晕 · han-cursor-glow
移 动 光 标 体 验 光 晕
扇面展开 · han-fan-expand
书写笔画 · han-stroke-writer--auto
汉
风
画
谱
意
· 字体与文字流 ·
字 体 系 统
朝代字体、竖排文字、书法文字、印章字体
朝代字体 · han-font-dynasty
周 · 大篆 风 格
秦 · 小 篆 风 格
汉 · 隶 书 风 格
唐 · 楷 书 风 格
宋 · 行 楷 风 格
明 · 行 草 风 格
清 · 馆 阁 体 风 格
竖排文字 · han-vertical
汉
以 中 国 传 统 美 学 为 魂
融 合 现 代 CSS 技 术
让 千 年 文 化 生 动 绽 放
书法段落 · han-calligraphy
墨 落 宣 纸 见 汉 风，
笔 走 龙 蛇 绘 古 今。
朱 红 印 章 钤 名 处，
千 年 文 化 一 瞬 息。
笔 走 龙 蛇 绘 古 今。
朱 红 印 章 钤 名 处，
千 年 文 化 一 瞬 息。
诗段落 · han-poem
山 不 在 高，有 仙 则 名。
水 不 在 深，有 龙 则 灵。
斯 是 陋 室，惟 吾 德 馨。
古籍封面 · han-album--open / han-album--blue
开 卷 有 益
HAN
第 一 页 · 序 言
第 二 页 · 目 录
第 三 页 · 正 文
珍
青 花 册
BLUE & WHITE
元 代 青 花 · 瓷 器 典 藏
藏
· 更多文化图标 ·
图 标 补 遗
更多传统符号：四君子、茶具、棋琴书画、太极、铜钱等
扩展图标 · 四君子 / 棋琴书画 / 茶道
兰花
桃花
灵芝
仙鹤
龙纹
凤凰
蝴蝶
游鱼
明月
红日
雷电
清风
· 结构布局 ·
分 栏 布 局
中式分屏布局、侧边栏、古籍段落 — 页面结构组件
分屏布局 · han-split-layout + han-sidebar
卷 一 · 画 法 总 论
画 有 六 法：气 韵 生 动、骨 法 用 笔、应 物 赋 彩、随 类 赋 形、经 营 位 置、传 移 模 写。 此 六 法 者，乃 画 之 根 本 也。
山 不 在 高，有 仙 则 名；
水 不 在 深，有 龙 则 灵。
古籍段落 · han-classical
古 之 画 者，外 师 造 化，中 得心 源。
不 独 以 形 貌 写 物，更 以 意 韵 传 神。
故 能 于 尺 幅 之 间，见 千 里 之 远。
诗集段 · han-poem
床 前 明 月 光，
疑 是 地 上 霜。
举 头 望 明 月，
低 头 思 故 乡。
古文引用 · classical-quote
墨 落 宣 纸 见 汉 风，—— 汉 风 画 谱
笔 走 龙 蛇 绘 古 今。
· 综合应用 ·
中 国 风 页 面 组 合
融合多个组件：匾额 + 对联 + 画框 + 印章 + 水墨按钮
书房场景 · 匾额 + 对联 + 印章相框
墨 香 千 秋 意 韵 流
翰 墨 斋
汉 风 画 谱
撰 文 者
翰
汉 风 千 载 意 韵 长
古籍展示 · 卷轴 + 卡片 + 印章
《 汉 风 画 谱 》
汇 集 历 代 名 家 真 迹，以 水 墨 表 现 山 水 之 美，以 朱 印 钤 记 真 伪。
- 唐 · 盛 世 气 象
- 宋 · 清 雅 简 极
- 明 · 庄 重 典 雅
· Hero 变体 ·
首 屏 变 体
ornament / landscape / calligraphy / seal / framed 五种 Hero 风格
han-hero--ornament · 装饰花纹
朱 印 为 记
装 饰 性 花 纹 背 景
han-hero--seal · 印章 Hero
汉 风 印 章
朱 印 钤 于 首 屏
han-hero--calligraphy · 书法 Hero
翰 墨 汉 风
笔 墨 飞 舞 入 场
han-hero--framed · 画框 Hero
画 框 内 容
画 框 式 首 屏
· 窗花边框变体 ·
窗 花 变 体
基础 / 图案 / 金饰 三种窗花边框
基础窗花 · han-frame-window
品 名
基 础 窗 花 边 框
图案窗花 · han-frame-window--pattern
图 案 窗 花
带 纹 饰 图 案 底
金饰窗花 · han-frame-window--gold
金 饰 窗 花
金 色 装 饰 边 框
四君子 · 窗花框 + 图案底
梅
傲 霜 凌 雪
兰
幽 谷 清 香
竹
虚 心 有 节
菊
傲 霜 秋 菊
· 分割线变体 ·
分 割 线 系 列
水墨 / 毛笔 / 印章 / 双线 四种分割线
基础水墨分割
毛笔分割 · han-divider-ink--brush
印章分割 · han-divider-ink--seal
双线分割 · han-divider-ink--double
· 进阶组件变体 ·
组 件 补 遗
右侧时间线、画廊带说明、上传进度、价格双显示等变体
右侧时间线 · han-timeline--right
唐 · 618-907
盛 世 气 象
宋 · 960-1279
清 雅 简 极
明 · 1368-1644
庄 重 典 雅
画廊带说明 · han-gallery__caption
山 水 画
山 水 清 音
宋 · 范 宽
人 物 画
仕 女 图
唐 · 张 萱
文件上传进度 · han-upload__progress
拖 入 或 点 击 上 传 文 件
-
《 汉 风 画 谱 .pdf》
-
《 水 墨 字 体 .zip》
价格双显示 · 原价 / 现价
¥188/ 幅
¥288
印章徽章 · 全变体
官 方
金 质
墨 印
圆 章
· 图案装饰 ·
纹 样 装 饰
云纹 / 回纹 / 缠枝 / 万字 / 冰裂 全系列装饰组件
装饰条带 · han-band-cloud / han-band-huiwen
装饰元素 · han-deco-cloud / han-deco-huiwen
云 纹
回 纹
图案边框 · 叠加 / 云纹 / 回纹
云 纹 底
回 纹 底
渐变背景 · 全部 7 种
墨
天
朱
金
纸
青
靛
混合背景 · sky-cloud / ink-ice / gold-chanzhi
天 青 云 纹
墨 冰 裂 纹
金 缠 枝
· 导航栏变体 ·
导 航 栏 系 列
基础 / 匾额 / 金色匾额 三种导航栏风格
基础导航栏 · han-navbar
匾额导航栏 · han-navbar--plaque
金色匾额 · han-navbar--plaque--gold
· 扩展图标 ·
图 标 系 列
更多中国风图标：祥云、仙鹤、龙凤、蝴蝶、明月、铜钱等
扩展文化图标 · han-icon (更多)
兰花
桃花
灵芝
仙鹤
龙纹
凤凰
蝴蝶
游鱼
明月
红日
雷电
清风
桃 (金)
鹤 (亮)
龙 (朱)
兰 (金)
通用 UI 图标 · han-icon-menu / close / search / arrow / chevron / user / cart / heart
菜单
关闭
搜索
箭头
向下
向上
向左
向右
用户
购物车
收藏
分享
邮件
电话
位置
日历
状态图标 · success / warning / error / info / help / loading / svg / text
成功
警告
错误
信息
帮助
墨加载
印章加载
装横线
· 布局补遗 ·
页 面 布 局
中堂 / 卷轴式长页 / 对联 全布局展示
中堂布局 · han-layout-hall (匾额 + 对联 + 主画)
墨 香 千 秋 意 韵 流
翰 墨 汉 风
《 汉 风 画 谱 》
代 代 名 家 真 迹 集 成
编 者 识
汉
汉 风 千 载 意 韵 长
卷轴式长页 · han-layout-scroll + han-scroll--wide
第 一 章 · 山 水 之 美
远 山 如 黛，近 水 含 烟。
第 二 章 · 人 物 之 韵
罗 裙 飘 逸，衣 袂 生 风。
第 三 章 · 花 鸟 之 趣
枝 头 鸣 雀，花 下 嬉 蝶。