按钮 · Button
软萌胶囊钮,绿/蓝/橙/奶油四色,无描边软投影,按下下沉。
ac-btn ( --green/--blue/--orange/--cream · --sm/--lg/--block/--round )
面板 · Panel
奶油圆角卡 + 绿色标题条 + 可选四角小树叶。
岛内广播
今天是钓鱼大赛!到广场找西施惠报名,钓上最大的鱼赢取奖杯吧~
ac-panel > ac-panel__hd + ac-panel__bd · 四角树叶:ac-leaf tl/tr/bl/br
弹窗 · Modal
遮罩 + 面板 + 圆形粉关闭钮。点击预览。
ac-modal-mask > ac-modal ( ac-modal__close + ac-panel )
进度条 · Bar
奶油槽光泽条,铃钱/友好度/里程三色,可加 label。
ac-bar > ac-bar__fill --bell/--friend/--mile + ac-bar__label
货币条 · Currency
铃钱/里程/大头菜三种,奶油胶囊。
🔔128,400
✈️6,850
🥬×40
ac-currency > ac-currency__coin --bell/--mile/--turnip + 数值
水果能量计 · Fruit Meter
吃水果攒力气,果子逐格点亮,满格数字红色闪烁。
ac-meter > 多个 ac-meter__seg(点亮加 .on) + ac-meter__num(满格加 .max)
图标底座 · Icon Slot
道具槽,普通/DIY 配方/稀有底色 + 冷却遮罩。
ac-icon ( --diy / --rare ) · 冷却:ac-icon__cd
岛民卡 · Card
岛民/物品卡,性格配色变体,悬停歪头上浮。
ac-card ( --peppy/--lazy/--smug ) > __art(含 __tag) + __name + __foot
列表项 · List
家具/道具通用行,左图标 + 主副标题 + 右值,虚线分隔。
ac-list > ac-list__item ( __ic + __tx(b+small) + __val )
顶部 HUD · HUD Bar
头像 + 名称/身份 + 右侧铃钱。
🧑🌾
小岛岛民代表桃桃岛 · ⭐⭐⭐ 评级
🔔128,400
ac-hud > ac-hud__ava + ac-hud__who(b+small) + ac-hud__spacer + 右侧组件
导航栏 · Nav Bar
底部主导航,绿底高亮当前页。点击切换。
ac-nav > ac-nav__tab ( --active ) > span.i + 文字
标签页 · Tabs
面板分页,点击切换。
家具:原木沙发 ×1 · 观叶植物 ×2 · 木吉他 ×1
ac-tabs > ac-tabs__tab ( --active )
输入框 · Input
奶油圆角框,聚焦绿光环;可选前置图标 ac-field。
<input class="ac-input"> · 带图标:ac-field > ac-field__ic + ac-input
下拉选择 · Select
奶油胶囊 + 橙色箭头。
ac-select > <select> > <option>
徽章 · Badge
粉/铃钱黄徽章,可贴图标右上。
ac-badge ( --bell ) · 贴角:ac-badge-wrap > 内容 + ac-badge
角标 · Ribbon
卡片左上圆头丝带。放 position:relative 容器内。
ac-ribbon ( --bell ) · 置于 relative 容器内
标签 · Tag
属性小标签,绿/蓝/粉变体。
自然风
🍃 绿植
🐟 海鲜
🌸 樱花系列
ac-tag ( --green / --blue / --pink )
提示 · Tooltip
悬停显示,内容取 data-tip。悬停试试。
鲟鱼
蜗牛
大头菜
<span class="ac-tooltip" data-tip="内容">
通知 · Toast
奶油提示,普通/危险/铃钱三种图标色。
ac-toast ( --danger / --bell ) > ac-toast__ic + 内容(b 标题)
对话气泡 · Bubble
动森招牌对话框:歪头名牌 + 圆角气泡。
西施惠
早上好!今天岛上有流星雨哦,记得晚上抬头对流星许愿呢~
ac-bubble > ac-bubble__who(浮动名牌) + 对话文字
加载 · Spinner
飘转树叶(旋转缩放)。
ac-spinner
头像组 · Avatar Group
岛民叠放 + 溢出计数,白描边圆。
ac-avatars > 多个 ac-avatars__a + ac-avatars__more
星级评分 · Stars
岛屿评级,.on 点亮金星。
★★★★★
★★★★★
ac-stars > 多个 <span>★,点亮加 .on
分隔线 · Divider
白色虚线,可带中心标签。
ac-divider > ac-divider__mark
空状态 · Empty
列表为空占位,图标+标题+说明。
ac-empty > ac-empty__ic + ac-empty__tt + ac-empty__ds
🍃 进阶组件 · Advanced
复杂交互组件,均可操作。
步进器 · Stepper
橙色圆钮数量选择,可点增减。
ac-stepper > ac-stepper__btn(−) + ac-stepper__val + ac-stepper__btn(+)
面包屑 · Breadcrumb
层级路径,末项高亮。
ac-breadcrumb > a + __sep … + __cur
手风琴 · Accordion
原生 details,枯叶/绿叶切换,无需 JS。
大头菜怎么玩?
周日上午向曹卖买入,一周内在商店卖出。价格每天上下午变动,周六下午前必须卖掉,否则会烂掉!
怎么获得梯子?
推进狸克的移居计划,准备第三间房屋用地时会解锁梯子的 DIY 配方。
流星雨怎么许愿?
听到流星声后,不拿任何工具抬头看天,流星划过时按 A 许愿,第二天海滩会出现星星碎片。
ac-accordion > <details> ( <summary> + ac-accordion__bd )
侧边抽屉 · Drawer
右滑圆角面板。点击预览。
ac-drawer-mask + ac-drawer ( __hd + __bd ) · 加 .open 展开
数据表格 · Table
钓鱼大赛排行,斑马纹 + 悬停高亮。
| 排名 | 岛民 | 鱼 | 尺寸 |
|---|
| ① | 岛民代表 | 皇带鱼 | 302.4 cm |
| ② | 小汪 | 鲈鱼 | 88.2 cm |
| ③ | 莉莉安 | 红鲷鱼 | 64.7 cm |
| 4 | 杰克 | 竹荚鱼 | 31.5 cm |
table.ac-table > thead th + tbody td · 名次:ac-table__rank
分页器 · Pagination
圆点翻页,--active 当前 / --dis 禁用。点击切换。
ac-pagination > ac-pagination__pg ( --active / --dis )
时间轴 · Timeline
搬家/建设进度,--done 完成 / --now 当前(铃钱金发光)。
ac-timeline > ac-timeline__item ( --done/--now ) ( __t + __d )
树形菜单 · Tree
图鉴分类,details 折叠。
🐟 鱼类图鉴
鲈鱼 (已捕获)
皇带鱼 (已捕获)
深海鱼
鮟鱇鱼 (未捕获)
腔棘鱼 (未捕获)
🦋 昆虫图鉴
凤蝶 (已捕获)
独角仙 (未捕获)
ac-tree > 嵌套 <details> + ac-tree__leaf
能量条倒计时 · Energy
水果力气回复,含实时倒计时。
ac-energy > __orb + __body ( __top(含 __timer) + ac-bar )
签到日历 · Calendar
7 日签到,--done 已领 / --today 当天橙框。
ac-calendar > ac-calendar__day ( --done / --today )
里程任务链 · Quest Chain
狸克里程进度,--done/--now + 虚线连接。
ac-questchain > __node( --done/--now ) 与 __link( --done ) 交替
成就解锁 · Achievement
奖章+标题+描述,--locked 灰化。
ac-achievement ( --locked ) > __medal + __tx(b+small)
翻牌 · Flip Card
CSS 3D 翻转,化石背面 → 鉴定结果。点击翻。
ac-flipcard > __inner > __face __back + __face __front · 加 .flipped
拆礼物 · Gift
点击弹开礼物盒,揭示内容物。
ac-chest > __box + __label + __glow · 加 .opened
背包网格 · Inventory Grid
口袋格子,DIY/稀有底色、数量角标、空格。
ac-invgrid > ac-invgrid__cell ( --diy/--rare/--empty ) + ac-invgrid__qty
道具对比 · Compare
普通斧头 vs 金斧头,属性升降绿/红标注。
ac-compare > __side + __vs + __side · 升降:ac-compare__up / __down