按钮 · Button
柔和渐变钮,紫/粉/薄荷/蓝,轻投影,按下微缩。soft/ghost/pill 变体。
ios-btn ( --purple/--pink/--mint/--blue · --soft/--ghost/--pill/--sm/--lg/--block )
面板 · Panel
纯白卡片,超大圆角,轻柔弥散投影。
每日挑战
完成 3 个关卡即可领取今日宝箱奖励,连续登录还有额外惊喜哦!
ios-panel > ios-panel__hd + ios-panel__bd
弹窗 · Modal
居中卡片 + 底部分段按钮(iOS Alert 风)。点击预览。
ios-modal-mask > ios-modal ( __hd + __bd + __ft > ios-btn )
进度条 · Bar
圆头渐变条,紫粉/薄荷蓝/琥珀三色,可加 cap 标题。
ios-bar__cap + ios-bar > ios-bar__fill --purple/--mint/--amber
货币条 · Currency
金币/宝石/爱心,白底柔和胶囊。
🪙1,240
💎86
❤️5
ios-currency > ios-currency__ic --coin/--gem/--heart + 数值
状态计量表 · Ring
环形 SVG 进度(渐变描边),stroke-dashoffset 控制百分比。
ios-ring > svg(ios-ring__track + ios-ring__val --purple/--mint) + ios-ring__num
图标底座 · Icon
圆角渐变图标,紫/粉/薄荷/琥珀 + 冷却遮罩。
ios-icon ( --pink/--mint/--amber ) · 冷却:ios-icon__cd
卡片 · Card
柔和渐变卡,含标签、名称、底部插槽,悬停上浮。
ios-card ( --mint/--amber/--blue ) > __art(含 __tag) + __name + __foot
列表项 · List
柔和行,左图标 + 主副标题 + 右值 + 箭头。
ios-list > ios-list__item ( __ic + __tx(b+small) + __val/__chev )
顶部 HUD · HUD Bar
头像 + 问候/信息 + 右侧货币。
ios-hud > ios-hud__ava + ios-hud__who(b+small) + ios-hud__spacer + 右侧组件
导航栏 · Nav Bar
毛玻璃底栏,--active 高亮上浮。点击切换。
ios-nav > ios-nav__tab ( --active ) > span.i + 文字
标签页 · Segmented
iOS 分段控件,滑块高亮。点击切换。
ios-tabs > ios-tabs__tab ( --active )
输入框 · Input
填充式圆角框,聚焦变白 + 紫光环;可选前置图标。
<input class="ios-input"> · 带图标:ios-field > ios-field__ic + ios-input
下拉选择 · Select
柔和白底 + 箭头。
ios-select > <select> > <option>
徽章 · Badge
红/紫柔和徽章,可贴图标右上。
ios-badge ( --purple ) · 贴角:ios-badge-wrap > 内容 + ios-badge
角标 · Ribbon
卡片右上圆润角标(渐变胶囊)。放 relative 容器内。
ios-ribbon ( --amber ) · 置于 relative 容器内
标签 · Tag
柔和色底小标签,紫/粉/薄荷/琥珀。
休闲
💖 收藏
✨ 新品
⭐ 热门
ios-tag ( --pink/--mint/--amber )
提示 · Tooltip
悬停显示,内容取 data-tip。悬停试试。
连击
体力
邀请
<span class="ios-tooltip" data-tip="内容">
通知 · Toast
柔和卡片提示,成功/危险/信息三色图标。
ios-toast ( --danger / --info ) > ios-toast__ic + 内容(b 标题)
对话气泡 · Bubble
渐变气泡(聊天风),含说话人名与尖角。
小助手
欢迎回来!今天也要元气满满地闯关哦,先来领取每日礼包吧 🎁
ios-bubble > ios-bubble__who + 对话文字
加载 · Spinner
柔和旋转圈 + 三色跳动圆点两种。
ios-spinner 或 ios-dots > 三个 <i>
头像组 · Avatar Group
白边圆形叠放 + 溢出计数。
ios-avatars > 多个 ios-avatars__a + ios-avatars__more
星级评分 · Stars
关卡评级,.on 点亮琥珀星。
★★★★★
★★★★★
ios-stars > 多个 <span>★,点亮加 .on
分隔线 · Divider
淡线,可带中心标签。
ios-divider > ios-divider__mark
空状态 · Empty
柔和圆角图标底 + 标题 + 说明。
ios-empty > ios-empty__ic + ios-empty__tt + ios-empty__ds
进阶组件 · Advanced
复杂交互组件,均可操作。
步进器 · Stepper
分段式数量选择,可点增减。
ios-stepper > ios-stepper__btn(−) + ios-stepper__val + ios-stepper__btn(+)
面包屑 · Breadcrumb
层级路径,末项高亮。
ios-breadcrumb > a + __sep … + __cur
手风琴 · Accordion
原生 details,箭头旋转。
怎么获得更多体力?
体力每 5 分钟自动恢复 1 点,也可以用宝石立即补满,或邀请好友赠送。
星星有什么用?
每关最多 3 星,集齐星星可解锁隐藏关卡和限定皮肤。
如何添加好友?
在「我的」页面点击添加好友,输入对方昵称或分享你的邀请码。
ios-accordion > <details> ( <summary> + ios-accordion__bd )
侧边抽屉 · Drawer
右滑面板 + 毛玻璃遮罩。点击预览。
ios-drawer-mask + ios-drawer ( __hd + __bd ) · 加 .open 展开
数据表格 · Table
柔和排行榜,悬停高亮。
| 排名 | 玩家 | 关卡 | 星星 |
|---|
| 1 | 小樱 🌸 | 128 | 384 ⭐ |
| 2 | 阿布 🐨 | 117 | 351 ⭐ |
| 3 | momo 🐰 | 106 | 318 ⭐ |
| 4 | 你 | 42 | 126 ⭐ |
table.ios-table > thead th + tbody td · 名次:ios-table__rank
分页器 · Pagination
翻页,--active 当前 / --dis 禁用。点击切换。
ios-pagination > ios-pagination__pg ( --active / --dis )
时间轴 · Timeline
竖向进度,--done 完成 / --now 当前。
ios-timeline > ios-timeline__item ( --done/--now ) ( __t + __d )
树形菜单 · Tree
嵌套分类,details 折叠。
🎨 皮肤
糖果系列 (6)
海洋系列 (4)
限定皮肤
星空 (1)
彩虹 (1)
🎁 道具
体力药水 (12)
提示卡 (5)
ios-tree > 嵌套 <details> + ios-tree__leaf
能量条倒计时 · Energy
体力,含实时恢复倒计时。
ios-energy > __orb + __body ( __top(含 __timer) + ios-bar )
签到日历 · Calendar
7 日签到,--done 已领 / --today 当天。
ios-calendar > ios-calendar__day ( --done / --today )
任务链 · Quest Chain
连锁节点,--done/--now + 连接线。
ios-questchain > __node( --done/--now ) 与 __link( --done ) 交替
成就解锁 · Achievement
奖章+标题+描述,--locked 灰化。
ios-achievement ( --locked ) > __medal + __tx(b+small)
翻牌 · Flip Card
CSS 3D 翻转,点击揭晓。
ios-flipcard > __inner > __face __back + __face __front · 加 .flipped
开礼盒 · Chest
点击弹跳开启,揭示奖励。
ios-chest > __box + __label + __glow · 加 .opened
背包网格 · Inventory Grid
柔和格子背包,稀有度底色、数量角标、空格。
ios-invgrid > ios-invgrid__cell ( --rare/--legend/--empty ) + ios-invgrid__qty
道具对比 · Compare
当前 vs 新道具,属性升降薄荷/红标注。
ios-compare > __side + __vs + __side · 升降:ios-compare__up / __down