简介这是一份面向前端初学者与网页交互爱好者的卡通人物表情动画实例源码围绕JavaScript与CSS3的配合解决网页中人物情绪动态切换与响应式展示的问题。压缩包共5个文件包含html与htm页面入口、css样式表、js脚本及一份说明文档整体仅3KB结构轻量便于直接运行和二次修改。资源以HTML元素搭建卡通人物头部、眼睛、嘴巴等结构通过CSS3的keyframes、animation、transition与transform实现喜怒哀乐等表情的平滑过渡并借助媒体查询完成响应式布局JS负责监听点击等交互事件动态增删表情类名同时可用requestAnimationFrame优化动画帧率。已有294人学习适合想掌握CSS3动画与JS事件驱动思路的开发者参考可从中理解表情切换、动画曲线控制与性能优化的具体写法。1. 从一张静态 SVG 到会眨眼的小人这套表情动画到底能干什么你可能遇到过这种需求产品页需要一个吉祥物能根据用户操作切换开心、疑惑、惊讶几种表情但设计只给了一张静态图。找动画师做序列帧成本高、改起来更痛用 GIF 又没法动态换色、换表情组合。这套 JSCSS3 卡通人物表情动画特效解决的正是这个场景——用纯前端代码把一张卡通人物的五官拆成独立图层靠 CSS3 的transform、animation和 JS 的状态切换让眼睛、眉毛、嘴巴各自动起来组合出十几种表情。它适合三类人一是做营销落地页、活动页的前端需要轻量交互元素又不想引入重型动画库二是做在线教育、儿童类产品的开发者卡通人物表情能提升亲和力三是想系统练一遍 CSS3 动画和 DOM 状态管理的初中级工程师。整套东西不依赖任何第三方库浏览器直接跑改一个参数就能换表情节奏这是它比序列帧方案更值得拆的地方。2. 表情动画的图层拆分与 CSS3 关键帧设计2.1 为什么用 SVG 分层而不是一张整图常见做法是把卡通人物画成一张 PNG然后整体做位移或缩放。但表情动画的核心是「局部动、其余不动」——眨眼时只有上眼睑下压眉毛挑动时只有眉毛位移嘴巴张合时只有下颚部分变化。如果整图一起动看起来就像整张脸在抽搐这是新手最容易翻车的地方。所以第一步是图层拆分。我一般会把人物拆成这几个独立元素头部轮廓静止、左眼白、左瞳孔、左眼睑、右眼白、右瞳孔、右眼睑、左眉、右眉、嘴巴上唇、嘴巴下唇、腮红可选。用 SVG 的g分组每组给一个 id方便 JS 精准控制。SVG 的好处是矢量、可无限缩放、每个子元素都能单独挂 CSS 动画而且颜色可以直接用fill改换肤不用重新导出图片。拆分的粒度要控制好。拆太细比如把瞳孔高光也单独拆出来动画逻辑会变得很碎拆太粗比如眉毛和眼睛放一组就没法做「挑眉但眼睛不动」的表情。经验值是凡是需要独立运动的部件就单独成组凡是永远同步运动的部件就合并。眼睛的上下眼睑通常要单独拆因为眨眼是眼睑动而不是眼球动。2.2 用 keyframes 定义眨眼、挑眉、张嘴三个基础动作图层拆好后先定义最基础的三个关键帧动画。眨眼是最高频的动作通常 3 到 5 秒触发一次持续 150 到 250 毫秒。挑眉是表情切换时的过渡动作。张嘴用于「惊讶」或「说话」状态。/* 眨眼上眼睑从原位下压再回弹 */ keyframes blink { 0% { transform: translateY(0); } 40% { transform: translateY(6px); } /* 下压幅度按 SVG 坐标系调 */ 60% { transform: translateY(6px); } 100% { transform: translateY(0); } } /* 挑眉眉毛整体上移再回落 */ keyframes browUp { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } } /* 张嘴下唇下移露出嘴部区域 */ keyframes mouthOpen { 0% { transform: translateY(0); } 50% { transform: translateY(5px); } 100% { transform: translateY(0); } }这里的关键参数是translateY的像素值。它取决于你 SVG 的 viewBox 坐标系。如果 viewBox 是0 0 200 200那 6px 在视觉上大约是眼睛高度的三分之一比较自然如果 viewBox 是0 0 1000 10006px 几乎看不出来得放大到 30px 左右。所以调参前先确认坐标系别照抄数值。animation-timing-function建议用ease-in-out让动作有加速减速比线性自然。眨眼这种快速动作可以用cubic-bezier(0.4, 0, 0.6, 1)微调。另外注意眨眼动画要挂在眼睑元素上不是眼球上挂错了就成了眼球在跳。2.3 用 CSS 变量统一控制动画节奏如果每个动画都写死时长和延迟后期想整体调快调慢就得一个个改。我习惯用 CSS 自定义属性把节奏抽出来:root { --blink-duration: 0.2s; --blink-interval: 4s; --brow-duration: 0.3s; --mouth-duration: 0.25s; } .eyelid { animation: blink var(--blink-duration) ease-in-out infinite; animation-delay: var(--blink-interval); }这样改一个变量就能全局调整。--blink-interval控制眨眼间隔想让角色显得更活泼就调到 2s想显得沉稳就调到 6s。注意animation-delay只影响第一次触发的延迟配合infinite后后续循环的间隔由animation-duration决定所以真正控制「多久眨一次」需要把 duration 设成整个周期、在 keyframes 里分配动作时间或者用 JS 定时器触发。这是很多人第一次做会踩的坑后面避坑章节会细说。3. 用 JS 状态机驱动表情切换3.1 把表情抽象成状态对象CSS 负责单个部件的动作JS 负责决定「什么时候该做哪个动作、哪些部件同时动」。最直接的做法是定义一个表情状态表每个表情对应一组 class 或一组属性const EXPRESSIONS { neutral: { brow: flat, mouth: closed, eye: normal }, happy: { brow: up, mouth: smile, eye: normal }, surprised:{ brow: up, mouth: open, eye: wide }, confused: { brow: leftUp, mouth: flat, eye: normal }, angry: { brow: down, mouth: flat, eye: narrow } }; function setExpression(name) { const state EXPRESSIONS[name]; if (!state) return; const face document.querySelector(#cartoonFace); // 先清掉旧的表情类避免叠加 face.className.baseVal face; face.classList.add(brow-${state.brow}); face.classList.add(mouth-${state.mouth}); face.classList.add(eye-${state.eye}); }逻辑说明EXPRESSIONS是纯数据把「表情」和「部件状态」解耦加新表情只要加一行数据不用改渲染逻辑。setExpression先重置 className 再叠加新类防止上一个表情的类残留导致动作冲突。注意 SVG 元素的 className 是SVGAnimatedString不能直接赋值字符串要用baseVal或者setAttribute(class, ...)这是操作 SVG 时的高频翻车点。参数说明brow的取值对应 CSS 里预定义的.brow-up、.brow-down等类每个类里挂不同的transform或animation。mouth同理。这样 CSS 和 JS 的职责边界很清晰CSS 管「长什么样、怎么动」JS 管「什么时候变成哪个」。3.2 用 transition 做表情间的平滑过渡如果表情切换是瞬间跳变会显得很生硬。给需要变化的部件加上transition让 transform 和 fill 平滑过渡.brow, .mouth, .eyelid { transition: transform 0.25s ease, fill 0.25s ease; transform-origin: center; }transform-origin: center很重要。SVG 元素的默认变换原点有时是 SVG 画布原点而不是元素自身中心导致旋转或缩放时位置跑偏。显式设成 center 能避免这个玄学问题。transition的时长建议和表情切换的触发节奏匹配200 到 300 毫秒比较跟手太长会显得迟钝。3.3 用事件委托绑定交互触发表情通常由用户操作触发鼠标悬停、点击按钮、滚动到某个位置。用事件委托统一处理避免给每个按钮单独绑事件document.querySelector(#expressionPanel).addEventListener(click, (e) { const btn e.target.closest([data-expression]); if (!btn) return; setExpression(btn.dataset.expression); }); // 鼠标悬停时临时切换移开恢复 const face document.querySelector(#cartoonFace); face.addEventListener(mouseenter, () setExpression(happy)); face.addEventListener(mouseleave, () setExpression(neutral));逻辑说明closest([data-expression])向上查找带该属性的最近祖先这样按钮里就算有图标子元素也能正确命中。dataset.expression读取>:root { --eye-scale: 1; --brow-y: 0px; --mouth-y: 0px; --anim-speed: 1; } .eye { transform: scale(var(--eye-scale)); } .brow { transform: translateY(var(--brow-y)); } .mouth { transform: translateY(var(--mouth-y)); } .eyelid { animation-duration: calc(0.2s / var(--anim-speed)); }JS 切换表情时不再加类而是直接改变量function applyExpression(cfg) { const root document.documentElement; root.style.setProperty(--eye-scale, cfg.eyeScale); root.style.setProperty(--brow-y, cfg.browY px); root.style.setProperty(--mouth-y, cfg.mouthY px); } // 惊讶眼睛放大、眉毛上移、嘴巴张开 applyExpression({ eyeScale: 1.3, browY: -5, mouthY: 6 });这样做的好处是表情之间可以插值过渡因为变量变化本身就能被 transition 捕获参数集中在 JS 对象里方便从配置文件或接口读取不同角色共用同一套 CSS只改变量就能换外观。验证性能时我习惯用浏览器开发者工具的 Performance 面板录一段表情切换看帧率是否稳定在 60fps重点看有没有长任务或强制同步布局。另一个土办法是在页面上放一个帧率计数器连续切换表情 20 次观察最低帧。如果掉到 30fps 以下先检查是不是动画属性用错了再检查同时动画的元素数量。有个细节值得单独说calc()里做除法时除数不能是 0--anim-speed要有兜底值。我一般写成var(--anim-speed, 1)防止变量未定义导致整个动画失效。这种小防御在多人协作的项目里能省不少排查时间。从那以后我每次做这类表情动画都强制先确认 SVG 坐标系和 transform-origin再动手写 keyframes最后一定在真机上跑一遍帧率。这套流程帮我省掉了大量返工。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/18 8:55:50 · 阅读 1.2k 纯前端JS+CSS3卡通人物表情动画：从静态SVG到眨眼交互
简介这是一份面向前端初学者与网页交互爱好者的卡通人物表情动画实例源码围绕JavaScript与CSS3的配合解决网页中人物情绪动态切换与响应式展示的问题。压缩包共5个文件包含html与htm页面入口、css样式表、js脚本及一份说明文档整体仅3KB结构轻量便于直接运行和二次修改。资源以HTML元素搭建卡通人物头部、眼睛、嘴巴等结构通过CSS3的keyframes、animation、transition与transform实现喜怒哀乐等表情的平滑过渡并借助媒体查询完成响应式布局JS负责监听点击等交互事件动态增删表情类名同时可用requestAnimationFrame优化动画帧率。已有294人学习适合想掌握CSS3动画与JS事件驱动思路的开发者参考可从中理解表情切换、动画曲线控制与性能优化的具体写法。1. 从一张静态 SVG 到会眨眼的小人这套表情动画到底能干什么你可能遇到过这种需求产品页需要一个吉祥物能根据用户操作切换开心、疑惑、惊讶几种表情但设计只给了一张静态图。找动画师做序列帧成本高、改起来更痛用 GIF 又没法动态换色、换表情组合。这套 JSCSS3 卡通人物表情动画特效解决的正是这个场景——用纯前端代码把一张卡通人物的五官拆成独立图层靠 CSS3 的transform、animation和 JS 的状态切换让眼睛、眉毛、嘴巴各自动起来组合出十几种表情。它适合三类人一是做营销落地页、活动页的前端需要轻量交互元素又不想引入重型动画库二是做在线教育、儿童类产品的开发者卡通人物表情能提升亲和力三是想系统练一遍 CSS3 动画和 DOM 状态管理的初中级工程师。整套东西不依赖任何第三方库浏览器直接跑改一个参数就能换表情节奏这是它比序列帧方案更值得拆的地方。2. 表情动画的图层拆分与 CSS3 关键帧设计2.1 为什么用 SVG 分层而不是一张整图常见做法是把卡通人物画成一张 PNG然后整体做位移或缩放。但表情动画的核心是「局部动、其余不动」——眨眼时只有上眼睑下压眉毛挑动时只有眉毛位移嘴巴张合时只有下颚部分变化。如果整图一起动看起来就像整张脸在抽搐这是新手最容易翻车的地方。所以第一步是图层拆分。我一般会把人物拆成这几个独立元素头部轮廓静止、左眼白、左瞳孔、左眼睑、右眼白、右瞳孔、右眼睑、左眉、右眉、嘴巴上唇、嘴巴下唇、腮红可选。用 SVG 的g分组每组给一个 id方便 JS 精准控制。SVG 的好处是矢量、可无限缩放、每个子元素都能单独挂 CSS 动画而且颜色可以直接用fill改换肤不用重新导出图片。拆分的粒度要控制好。拆太细比如把瞳孔高光也单独拆出来动画逻辑会变得很碎拆太粗比如眉毛和眼睛放一组就没法做「挑眉但眼睛不动」的表情。经验值是凡是需要独立运动的部件就单独成组凡是永远同步运动的部件就合并。眼睛的上下眼睑通常要单独拆因为眨眼是眼睑动而不是眼球动。2.2 用 keyframes 定义眨眼、挑眉、张嘴三个基础动作图层拆好后先定义最基础的三个关键帧动画。眨眼是最高频的动作通常 3 到 5 秒触发一次持续 150 到 250 毫秒。挑眉是表情切换时的过渡动作。张嘴用于「惊讶」或「说话」状态。/* 眨眼上眼睑从原位下压再回弹 */ keyframes blink { 0% { transform: translateY(0); } 40% { transform: translateY(6px); } /* 下压幅度按 SVG 坐标系调 */ 60% { transform: translateY(6px); } 100% { transform: translateY(0); } } /* 挑眉眉毛整体上移再回落 */ keyframes browUp { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } } /* 张嘴下唇下移露出嘴部区域 */ keyframes mouthOpen { 0% { transform: translateY(0); } 50% { transform: translateY(5px); } 100% { transform: translateY(0); } }这里的关键参数是translateY的像素值。它取决于你 SVG 的 viewBox 坐标系。如果 viewBox 是0 0 200 200那 6px 在视觉上大约是眼睛高度的三分之一比较自然如果 viewBox 是0 0 1000 10006px 几乎看不出来得放大到 30px 左右。所以调参前先确认坐标系别照抄数值。animation-timing-function建议用ease-in-out让动作有加速减速比线性自然。眨眼这种快速动作可以用cubic-bezier(0.4, 0, 0.6, 1)微调。另外注意眨眼动画要挂在眼睑元素上不是眼球上挂错了就成了眼球在跳。2.3 用 CSS 变量统一控制动画节奏如果每个动画都写死时长和延迟后期想整体调快调慢就得一个个改。我习惯用 CSS 自定义属性把节奏抽出来:root { --blink-duration: 0.2s; --blink-interval: 4s; --brow-duration: 0.3s; --mouth-duration: 0.25s; } .eyelid { animation: blink var(--blink-duration) ease-in-out infinite; animation-delay: var(--blink-interval); }这样改一个变量就能全局调整。--blink-interval控制眨眼间隔想让角色显得更活泼就调到 2s想显得沉稳就调到 6s。注意animation-delay只影响第一次触发的延迟配合infinite后后续循环的间隔由animation-duration决定所以真正控制「多久眨一次」需要把 duration 设成整个周期、在 keyframes 里分配动作时间或者用 JS 定时器触发。这是很多人第一次做会踩的坑后面避坑章节会细说。3. 用 JS 状态机驱动表情切换3.1 把表情抽象成状态对象CSS 负责单个部件的动作JS 负责决定「什么时候该做哪个动作、哪些部件同时动」。最直接的做法是定义一个表情状态表每个表情对应一组 class 或一组属性const EXPRESSIONS { neutral: { brow: flat, mouth: closed, eye: normal }, happy: { brow: up, mouth: smile, eye: normal }, surprised:{ brow: up, mouth: open, eye: wide }, confused: { brow: leftUp, mouth: flat, eye: normal }, angry: { brow: down, mouth: flat, eye: narrow } }; function setExpression(name) { const state EXPRESSIONS[name]; if (!state) return; const face document.querySelector(#cartoonFace); // 先清掉旧的表情类避免叠加 face.className.baseVal face; face.classList.add(brow-${state.brow}); face.classList.add(mouth-${state.mouth}); face.classList.add(eye-${state.eye}); }逻辑说明EXPRESSIONS是纯数据把「表情」和「部件状态」解耦加新表情只要加一行数据不用改渲染逻辑。setExpression先重置 className 再叠加新类防止上一个表情的类残留导致动作冲突。注意 SVG 元素的 className 是SVGAnimatedString不能直接赋值字符串要用baseVal或者setAttribute(class, ...)这是操作 SVG 时的高频翻车点。参数说明brow的取值对应 CSS 里预定义的.brow-up、.brow-down等类每个类里挂不同的transform或animation。mouth同理。这样 CSS 和 JS 的职责边界很清晰CSS 管「长什么样、怎么动」JS 管「什么时候变成哪个」。3.2 用 transition 做表情间的平滑过渡如果表情切换是瞬间跳变会显得很生硬。给需要变化的部件加上transition让 transform 和 fill 平滑过渡.brow, .mouth, .eyelid { transition: transform 0.25s ease, fill 0.25s ease; transform-origin: center; }transform-origin: center很重要。SVG 元素的默认变换原点有时是 SVG 画布原点而不是元素自身中心导致旋转或缩放时位置跑偏。显式设成 center 能避免这个玄学问题。transition的时长建议和表情切换的触发节奏匹配200 到 300 毫秒比较跟手太长会显得迟钝。3.3 用事件委托绑定交互触发表情通常由用户操作触发鼠标悬停、点击按钮、滚动到某个位置。用事件委托统一处理避免给每个按钮单独绑事件document.querySelector(#expressionPanel).addEventListener(click, (e) { const btn e.target.closest([data-expression]); if (!btn) return; setExpression(btn.dataset.expression); }); // 鼠标悬停时临时切换移开恢复 const face document.querySelector(#cartoonFace); face.addEventListener(mouseenter, () setExpression(happy)); face.addEventListener(mouseleave, () setExpression(neutral));逻辑说明closest([data-expression])向上查找带该属性的最近祖先这样按钮里就算有图标子元素也能正确命中。dataset.expression读取>:root { --eye-scale: 1; --brow-y: 0px; --mouth-y: 0px; --anim-speed: 1; } .eye { transform: scale(var(--eye-scale)); } .brow { transform: translateY(var(--brow-y)); } .mouth { transform: translateY(var(--mouth-y)); } .eyelid { animation-duration: calc(0.2s / var(--anim-speed)); }JS 切换表情时不再加类而是直接改变量function applyExpression(cfg) { const root document.documentElement; root.style.setProperty(--eye-scale, cfg.eyeScale); root.style.setProperty(--brow-y, cfg.browY px); root.style.setProperty(--mouth-y, cfg.mouthY px); } // 惊讶眼睛放大、眉毛上移、嘴巴张开 applyExpression({ eyeScale: 1.3, browY: -5, mouthY: 6 });这样做的好处是表情之间可以插值过渡因为变量变化本身就能被 transition 捕获参数集中在 JS 对象里方便从配置文件或接口读取不同角色共用同一套 CSS只改变量就能换外观。验证性能时我习惯用浏览器开发者工具的 Performance 面板录一段表情切换看帧率是否稳定在 60fps重点看有没有长任务或强制同步布局。另一个土办法是在页面上放一个帧率计数器连续切换表情 20 次观察最低帧。如果掉到 30fps 以下先检查是不是动画属性用错了再检查同时动画的元素数量。有个细节值得单独说calc()里做除法时除数不能是 0--anim-speed要有兜底值。我一般写成var(--anim-speed, 1)防止变量未定义导致整个动画失效。这种小防御在多人协作的项目里能省不少排查时间。从那以后我每次做这类表情动画都强制先确认 SVG 坐标系和 transform-origin再动手写 keyframes最后一定在真机上跑一遍帧率。这套流程帮我省掉了大量返工。希望帮到你。本文还有配套的精品资源点击获取