按钮
Cartoon-style button with bold outlines, bright fills and comic book energy
- 基础骨架
font-bold rounded-xl border-3 border-[#1a1a2e] transition-all duration-150- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
赛璐璐动画风组件配方
font-bold rounded-xl border-3 border-[#1a1a2e] transition-all duration-150 bg-[#e63946] text-white shadow-[3px_3px_0px_0px_#1a1a2e] hover:shadow-[5px_5px_0px_0px_#1a1a2e] hover:translate-x-[-2px] hover:translate-y-[-2px] active:translate-x-[2px] active:translate-y-[2px] active:shadow-[1px_1px_0px_0px_#1a1a2e]卡片
Cartoon panel card with thick outlines, flat colors and cel-shaded depth
- 基础骨架
bg-[#fafaf5] border-3 border-[#1a1a2e] rounded-xl overflow-hidden transition-all duration-150- 变体
- 默认、红色、蓝色
- 状态
- hover
输入框
Cartoon-outlined input with bold border, bright focus and cel-shaded style
- 基础骨架
w-full bg-[#fafaf5] border-3 border-[#1a1a2e] rounded-xl text-[#1a1a2e] font-medium placeholder:text-[#1a1a2e]/40 focus:outline-none transition-all duration-150- 变体
- 默认、红色
- 状态
- focus、disabled