事情是这样的，上个月我在微信群里发了一个自己做的表情包，结果好几个朋友问我这是哪来的，我说我自己用代码写的，他们都不信。其实真没那么玄乎，就是几行表情制作网页代码的事。今天我就把整个过程掰开揉碎了讲一遍，保证你看完也能做出来。
为什么要用代码做表情？
可能有人会问，网上那么多现成的表情包，直接下载不就行了？说实话，我之前也是这么想的。直到有一次我想做一个特别具体的表情——一只猫戴着墨镜，手里拿着奶茶，脚下还踩着滑板——我翻了半小时图库都没找到合适的。那一刻我就想，为什么不自己做一个呢？
用表情制作网页代码的好处就在于，你想要什么就能做什么，不受素材库的限制。而且做出来的东西是独一无二的，发到群里别人一看就知道是你做的。另外，学会了这个技能，以后做头像、做海报、做简单的动画都能用上，属于那种学会了一劳永逸的事情。
基础准备：你需要知道什么？
先说结论：你不需要是程序员。我本人就是个普通微信用户，大学学的是市场营销，代码水平仅限于大学选修课的水平。但就是这点基础，足够做出能用的表情包了。
具体来说，你需要了解三个东西：
- HTML：就是网页的结构，相当于盖房子的框架。表情里的文字、图片、背景，都是通过HTML放在页面上的。
- CSS：负责样式，相当于装修。表情的大小、颜色、圆角、阴影、动画，都是CSS控制的。
- JavaScript：负责交互和动态效果，相当于房子的智能系统。比如点击表情会动、文字会闪烁，这些都需要JavaScript。
如果你这三个一个都不会，也没关系。我后面会贴一个最简单的模板，你直接复制就能用，改改文字和颜色就行。
第一步：做一个静态表情
我们先从最简单的开始——一个带文字的静态表情。比如我想做一个“哈哈哈”的表情，一张黄色的圆脸，上面写着“哈哈哈”。
代码大概长这样：
<div style="width:200px;height:200px;background:#FFD700;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:bold;"> 哈哈哈 </div>
这段代码里，表情制作网页代码的核心逻辑就是：用一个div标签画一个圆，然后里面放文字。你把这个代码复制到一个.html文件里，用浏览器打开，就能看到一个黄色的圆脸表情了。如果你想改成蓝色，就把#FFD700改成#00BFFF；想改文字，就把“哈哈哈”改成别的。
这个就是最基础的表情包制作方法。虽然简单，但已经能应付很多场景了。比如你可以在群里回复一个“收到”，或者“好的”，用这种表情比纯文字生动多了。
第二步：加一点动画效果
静态表情看久了有点无聊，接下来我们加点动态。还是刚才那个黄色圆脸，我想让它上下跳动，像在点头一样。
这时候就需要CSS动画了：
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .emoji { animation: bounce 1s infinite; }
把这段CSS加到刚才的代码里，表情就会一直上下跳动了。这里的技巧是，CSS动画可以控制表情的移动、旋转、缩放、透明度变化等等。比如你想让表情转圈，就把translateY改成rotate；想让表情变大变小，就用scale。
我试过最搞笑的一个效果是，让表情的眼睛左右移动，像在翻白眼。那个代码稍微复杂一点，但原理是一样的——把眼睛做成两个小圆，然后让它们左右平移。
第三步：加入交互功能
如果你想让表情能跟人互动，比如点击一下它就变脸，那就需要JavaScript了。
比如这个场景：群里有人说了一句“加班”，你发了一个表情，表情本来是笑脸，别人点了一下变成了哭脸。这种交互在微信里当然实现不了，但如果你把表情做成网页链接发到群里，别人点开就能玩。
JavaScript的核心代码就几行：
document.getElementById('emoji').onclick = function() { this.innerHTML = '哭脸'; this.style.background = '#87CEEB'; }
这段代码的意思是：当用户点击id为“emoji”的元素时，把里面的文字改成“哭脸”，背景颜色改成天蓝色。当然，实际做的时候你可以换图片、换动画、换任何东西。
JavaScript交互的好处是，你可以做出各种奇奇怪怪的效果。比如我做过一个表情，点击它之后它会说一句话，再点击又说另一句，像个自动回复机器人。这个在群里特别好玩，尤其是当大家都在刷屏的时候，你发一个这种交互表情，能吸引不少人点开看。
第四步：把表情做成图片或动图
网页代码做出来的表情，只能在浏览器里看。如果你想把它用到微信里，就需要把它导出成图片或者GIF动图。
方法也很简单：
- 如果是静态表情，直接用截图工具截图，然后裁剪一下就行。微信对表情的大小有限制，一般不超过500KB，截图完全够用。
- 如果是动态表情，可以用浏览器自带的录屏功能，或者用一些在线工具把网页转成GIF。我自己用的是QQ截图自带的录屏功能，录几秒钟就够用了。
这里有个小技巧：导出的时候尽量把背景做成透明的，这样表情放到微信里不会有一块白色的底。但表情制作网页代码默认背景是不透明的，需要你在CSS里加一句background: transparent; 或者用PNG格式的图片。
第五步：进阶玩法——表情生成器
如果你做的表情比较多，每次都改代码也挺麻烦的。这时候可以做一个表情生成器——就是一个网页，上面有几个输入框，你填上文字、选个颜色、选个表情类型，点一下按钮就自动生成表情。
这个其实也不难，核心就是JavaScript获取输入框的值，然后动态修改HTML内容。举个例子：
let text = document.getElementById('input').value; document.getElementById('emoji').innerHTML = text;
这样，你输入什么，表情就显示什么。如果再配合几个预设的样式选项，比如“开心”、“难过”、“惊讶”，就相当于做了一个简易的表情工坊。做好之后，你可以把这个网页分享给朋友，他们也能用。
我用了这个方法之后，群里好几个人都来找我要这个网页，说以后做表情方便多了。其实他们不知道，这个网页就是几行网页代码教程里的基础代码拼起来的。
一些踩过的坑
做表情包制作这件事，看起来简单，实际做起来还是有一些坑的。我把我踩过的几个列出来，你们可以避开：
- 尺寸问题：微信表情的尺寸一般是240x240像素，太大了会被压缩，太小了看不清楚。我第一次做的时候做了个500x500的，结果发到微信里糊成一团。
- 颜色太花：表情包讲究的是简洁明快，颜色不要超过三种。我一开始做了个彩虹色的，结果看起来像马赛克。
- 动画太快：CSS动画的时间设置很关键，太快了看着头晕，太慢了没有效果。一般1秒到2秒一个循环比较合适。
- 兼容性：有些CSS属性在微信内置浏览器里不支持，比如backdrop-filter。所以尽量用基础的属性，别整太花哨的。
补充方案
上面讲的都是纯手写代码的方法，适合喜欢折腾的人。如果你觉得写代码太麻烦，或者想快速出效果，也可以用一些现成的工具。
我实际用过的一个是SOOGIF的表情制作功能。它的优点是操作简单，上传图片、加文字、调动画都很直观，不需要写任何代码。而且它支持直接导出GIF和APNG格式，微信里都能用。对于不想学代码的人来说，这个工具确实能省不少时间。
但它的限制也很明显：一是素材库有限，如果你想做一些特别个性化的表情，比如用自己画的图，就得自己上传，但上传之后编辑的灵活性不如代码高；二是免费版本有水印，去水印需要付费；三是它生成的GIF质量一般，颜色多了会有色块，不如自己用代码做的清晰。
所以我的建议是：如果你只是偶尔做几个表情玩玩，用工具就够了；但如果你像我一样，经常需要做各种奇怪的表情，或者想把表情做得特别精细，还是花点时间学学表情制作网页代码更划算。毕竟学会了就是自己的技能，以后想做什么都能做。
