头像组件
CutestUI 头像组件是一款优雅、功能丰富的用户头像展示工具，支持多种尺寸、形状、主题和视觉效果，为您的界面增添个性化魅力。
组件概览
头像组件是现代界面设计中不可或缺的元素，用于展示用户头像、品牌标识或其他视觉元素。CutestUI 头像组件提供了丰富的自定义选项，让您可以轻松实现各种视觉效果，从简约到华丽，满足不同设计需求。
特性
- 灵活的尺寸控制：提供从超小型到巨型的6种尺寸变体
- 多样的形状选择：支持圆形、方形、圆角方形和胶囊形等多种形状
- 丰富的主题色彩：内置主色调、成功、警告、信息、危险等5种主题
- 精美的视觉效果：包括玻璃拟态、边框、阴影、霓虹灯和浮雕等多种效果
- 状态徽章支持：可显示在线、离线、忙碌、离开等用户状态
- 头像组功能：支持多个头像重叠显示，适用于团队展示场景
- 流畅的动画效果：包含脉冲、旋转和漂浮等多种动态效果
- 完善的响应式设计：适配各种屏幕尺寸
- 无障碍支持：符合Web可访问性标准
使用示例
基础头像
JS
基础头像可以使用图片或文字作为内容，支持激活和禁用状态。
头像大小变体
头像组件提供从超小型(24px)到巨型(120px)的六种尺寸选择，满足不同场景需求。
头像形状变体
支持圆形、方形、圆角方形和胶囊形四种形状变体，适应不同的设计风格。
头像主题变体
PR
SC
WG
IN
DR
内置五种主题色彩，为无图片头像提供美观的背景和边框颜色。
头像状态徽章
支持在线、离线、忙碌和离开四种状态徽章，直观展示用户当前状态。
头像特殊效果
提供玻璃拟态、边框、阴影、霓虹灯和浮雕等多种视觉效果，为头像增添独特魅力。
头像动画效果
支持脉冲、旋转、漂浮和加载状态等多种动画效果，提升用户体验。
头像组
+5
头像组功能支持多个头像重叠显示，适用于团队展示、评论区等场景。
代码示例
JS
使用指南
基本用法
使用 CutestUI 头像组件非常简单，只需添加相应的 CSS 类到 HTML 元素中即可实现各种效果。
- 引入 CSS 文件：
<link rel="stylesheet" href="/public/static/css/avatars.css"> - 使用基础类：
cutest-avatar作为所有头像的基础类 - 添加图片或文字内容
尺寸控制
通过添加以下尺寸类来控制头像大小：
size-xs- 超小型 (24px)size-sm- 小型 (32px)size-md- 中型 (48px，默认)size-lg- 大型 (64px)size-xl- 超大 (80px)size-xxl- 巨型 (120px)
形状变体
通过添加以下形状类来改变头像形状：
- 默认 - 圆形
shape-square- 方形shape-rounded- 圆角方形shape-pill- 胶囊形
主题色彩
为无图片头像添加主题色彩：
theme-primary- 主色调 (蓝色渐变)theme-success- 成功 (绿色渐变)theme-warning- 警告 (黄色渐变)theme-info- 信息 (青色渐变)theme-danger- 危险 (红色渐变)
视觉效果
添加特殊视觉效果：
effect-glass- 玻璃拟态效果effect-border- 双重边框效果effect-shadow- 增强阴影效果effect-neon- 霓虹灯效果effect-embossed- 浮雕效果
状态徽章
添加状态徽章以显示用户当前状态：
avatar-badge online- 在线状态 (绿色)avatar-badge offline- 离线状态 (灰色)avatar-badge busy- 忙碌状态 (红色)avatar-badge away- 离开状态 (黄色)
动画效果
为头像添加动画效果：
animate-pulse- 脉冲动画animate-rotate- 旋转动画animate-float- 漂浮动画loading- 加载状态动画
头像组
创建头像组来展示多个用户：
- 使用
avatar-group作为容器类 - 内部放置多个
cutest-avatar元素 - 可以混合使用图片头像和文字头像
无障碍支持
为了提高可访问性，请确保：
- 为所有图片头像添加有意义的
alt属性 - 使用
aria-label为文字头像提供额外描述