效果图
引入基础样式库和特色字体（如 “Baloo”“Kosugi Maru”），为可爱风格打底；
用自定义<mochi-box>组件封装每个柴犬卡片，内置名字、品种等信息插槽，让代码更规整；
预留 SVG 容器承载柴犬图形，后续通过 CSS 和 JS 控制表情、姿态，为交互埋下伏笔。
基础样式：定义柴犬毛发、鼻子、舌头等元素的默认色（如浅棕色毛发、粉色舌头），不同品种（芝麻色、樱花色）通过类名切换专属配色；
表情控制：用visibility属性隐藏 / 显示不同表情组件（眨眼、脸红、吐舌），配合类名快速切换 “开心”“害羞”“调皮” 等状态；
交互动效：添加鼠标悬浮 / 点击动画，比如柴犬弹出、爪子微动、眼睛 wink，让静态图形瞬间 “活” 起来，提升互动感。
组件封装：把柴犬图形拆成<MochiShiba>（身体）和<MochiPaws>（爪子）组件，支持传入 “表情”“耳朵姿态”“是否脸红” 等参数；
动态切换：通过计算属性将参数转化为 CSS 类名，实时更新柴犬的耳朵方向（立耳 / 垂耳）、眼睛状态（睁眼 / 眨眼）；
随机互动：添加 “随机柴犬” 功能，点击按钮可随机切换品种、表情和姿态，让页面充满新鲜感，增强用户参与感。
<html lang="zh"><head><meta charset="UTF-8" /><title>可爱的柴犬</title><linkrel="stylesheet"href="https://public.codepenassets.com/css/normalize-5.0.0.min.css"/><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Baloo|Kosugi+Maru&display=swap"/><style>.MochiShiba path,.MochiPaws path {fill: none;stroke: none;stroke-width: 1.2;stroke-miterlimit: 10;stroke-linejoin: round;stroke-linecap: round;}.MochiShiba .thin,.MochiPaws .thin {stroke-width: 0.8;}.MochiShiba #eyes path,.MochiPaws #eyes path {stroke-width: 2;}.MochiShiba .fur,.MochiPaws .fur {fill: #dd9e47;}.MochiShiba .fur2,.MochiPaws .fur2 {fill: white;}.MochiShiba .inner,.MochiPaws .inner {fill: white;}.MochiShiba .outline,.MochiPaws .outline {stroke: #4e2e0f;}.MochiShiba .nose,.MochiShiba .eye,.MochiPaws .nose,.MochiPaws .eye {fill: #3c2012;}.MochiShiba .gleam,.MochiPaws .gleam {fill: white;}.MochiShiba #laugh .eye,.MochiPaws #laugh .eye {fill: none;}.MochiShiba .tongue,.MochiPaws .tongue {fill: #f2a3ad;}.MochiShiba .drool,.MochiPaws .drool {fill: #41b5dd;}.MochiShiba .scarf,.MochiPaws .scarf {fill: #002a57;}.MochiShiba .logo,.MochiPaws .logo {fill: white;}.MochiShiba #cheeks .right,.MochiPaws #cheeks .right {fill: url(#cheeks);}.MochiShiba #cheeks .left,.MochiPaws #cheeks .left {fill: url(#cheeks-2);}.MochiShiba #cheeks {visibility: hidden;}.MochiShiba #ears #left1,.MochiShiba #ears #right2,.MochiShiba #ears #left3,.MochiShiba #ears #right3 {visibility: hidden;}.MochiShiba #eyes #wink,.MochiShiba #eyes #shy,.MochiShiba #eyes #laugh,.MochiShiba #eyes .gleam {visibility: hidden;}.MochiShiba #brows #expecting {visibility: hidden;}.MochiShiba [id^="mouth"] {visibility: hidden;}.MochiShiba [id^="mouth1"] {visibility: visible;}.MochiShiba #base #outline2,.MochiShiba #base #outline3 {visibility: hidden;}.MochiShiba #base #top2,.MochiShiba #base #top3 {visibility: hidden;}.MochiShiba.blush #cheeks {visibility: visible;}.MochiShiba.content [id^="mouth"] {visibility: hidden;}.MochiShiba.happy [id^="mouth"] {visibility: hidden;}.MochiShiba.happy #mouth2 {visibility: visible;}.MochiShiba.excited [id^="mouth"] {visibility: hidden;}.MochiShiba.excited #mouth3 {visibility: visible;}.MochiShiba.cute #brows #expecting {visibility: visible;}.MochiShiba.cute #brows #focussed {visibility: hidden;}.MochiShiba.cute [id^="mouth"] {visibility: hidden;}.MochiShiba.cute #mouth4 {visibility: visible;}.MochiShiba.drool [id^="mouth"] {visibility: hidden;}.MochiShiba.drool #mouth5 {visibility: visible;}.MochiShiba.cheeky [id^="mouth"] {visibility: hidden;}.MochiShiba.cheeky #mouth6 {visibility: visible;}.MochiShiba.gleam #brows #expecting {visibility: visible;}.MochiShiba.gleam #brows #focussed {visibility: hidden;}.MochiShiba.gleam #snout {transform: translateY(-3%);}.MochiShiba.gleam #brows {transform: translateY(-5%);}.MochiShiba.gleam #eyes {transform: translateY(-4.5%);}.MochiShiba.gleam #eyes #open .eye.left {transform: matrix(0.7, -0.7, 0.7, 0.7, -31.2, 54.3) scale(1.2);}.MochiShiba.gleam #eyes #open .eye.right {transform: translate(-27.5px, 83px) rotate(-42.36deg) scale(1.2);}.MochiShiba.gleam #cheeks {transform: translateY(-4%);}.MochiShiba.gleam [id^="mouth"] {visibility: hidden;}.MochiShiba.gleam #mouth1 {visibility: visible;}.MochiShiba.ears #ears > g {visibility: hidden;}.MochiShiba.ears.l1 #ears > #left1 {visibility: visible;}.MochiShiba.ears.l2 #ears > #left2 {visibility: visible;}.MochiShiba.ears.l3 #ears > #left3 {visibility: visible;}.MochiShiba.ears.l4 #ears > #left4 {visibility: visible;}.MochiShiba.ears.r1 #ears > #right1 {visibility: visible;}.MochiShiba.ears.r2 #ears > #right2 {visibility: visible;}.MochiShiba.ears.r3 #ears > #right3 {visibility: visible;}.MochiShiba.ears.r4 #ears > #right4 {visibility: visible;}.MochiShiba.ears #base [id^="outline"],.MochiShiba.ears #base [id^="top"] {visibility: hidden;}.MochiShiba.ears.l1.r1 #base #outline2,.MochiShiba.ears.l1.r1 #base #top2,.MochiShiba.ears.l4.r4 #base #outline2,.MochiShiba.ears.l4.r4 #base #top2 {visibility: visible;}.MochiShiba.ears.l1.r2 #base #outline1,.MochiShiba.ears.l1.r2 #base #top2,.MochiShiba.ears.l1.r4 #base #outline1,
