野兽派也可以很有趣。硬边缘 + 彩色 + 弹簧感 = 俏皮野兽派。
纯黑底色配 5 种强调色。彩色硬阴影在各色之间跳跃——这就是 Color Ping-Pong。
无圆角。粗边框。彩色阴影。每个组件都有旋转 + 弹簧反馈。
Primary — Toy Spring + Joyful Press
Outline & Ghost variants
Size variants
每条规则都有一个可交互演示。点击、悬停、感受弹簧感——这是让俏皮野兽派区别于普通 Brutalist 的核心。
cubic-bezier(0.34, 1.56, 0.64, 1)
位移和旋转带有弹簧回弹感。像按压一个弹簧玩具——松开时会过冲再稳定。
点击查看弹簧运动
rotate-[-2deg] -> hover:rotate-[3deg]
初始轻微倾斜,hover 时切换到反向更大角度(仍在 3 度内)。保持俏皮但可控。
Hover each card to see the tilt flip — never exceeds 3deg.
shadow: Red -> Teal -> Yellow -> ...
硬边阴影在青、粉、黄之间跳跃切换。维持野兽派结构同时增强玩具感。
active: shadow=0 + translate + scale(0.95)
:active 需要"压扁"反馈:阴影归零 + 等量位移 + 轻微缩放。模拟真实按压感。
一个真实的活动看板 UI,展示俏皮野兽派在产品界面中的应用。彩色卡片 + 彩色边框 + 旋转装饰。
俏皮野兽派有明确的边界。跨越这些边界,风格就会崩塌。遵守它们,你会得到真正的俏皮。
Neo-Brutalist Playful 是原版 Neo-Brutalist 的活泼变体。 在保持硬边缘、无圆角的结构基础上, 通过 轻微旋转、 多彩色块、 弹簧动画和 图标化装饰增加趣味性。
适用场景:年轻化品牌、创意工作室、儿童产品、趣味应用
cubic-bezier(0.34,1.56,0.64,1) 让所有交互带有玩具弹性,区别于硬切的原版。
零圆角。border-4 border-black。这是野兽派的 DNA——不可妥协。
元素轻微倾斜 1-2deg,hover 时切换反向。给静态布局注入活力。
阴影颜色在红青黄之间 Ping-Pong 切换。这是最具辨识度的俏皮元素。
Joyful Press:点击时阴影归零 + 位移 + scale-95,模拟真实物理按压。
方块、三角、线条作为装饰元素。禁止 emoji——纯几何才是野兽派语言。