刷短视频时，手指一点，心形炸开、火花四溅——这种点赞反馈，看着就带感。其实网页里也能做，不靠专业前端，小白也能上手。
先搞清你在哪加
点赞特效分三类场景：一是自己做的静态网页（比如个人博客首页）；二是用 WordPress 建的网站；三是微信公众号文章或小程序。咱们从最通用、最容易改的 HTML 页面开始。
纯 HTML + CSS 实现一个跳动爱心
新建一个 .html 文件，贴进下面这段代码，双击打开就能看到效果：
<!DOCTYPE html>
<html>
<head>
<style>
.like-btn {
position: relative;
padding: 10px 20px;
background: #ff6b6b;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.like-btn:hover {
background: #ff5252;
}
.like-effect {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
opacity: 0;
animation: pop 0.5s forwards;
}
@keyframes pop {
0% { opacity: 1; transform: translateX(-50%) scale(0.8); }
100% { opacity: 0; transform: translateX(-50%) scale(1.4); }
}
</style>
</head>
<body>
<button class="like-btn" onclick="addLikeEffect(this)">❤ 点赞</button>
<script>
function addLikeEffect(btn) {
const effect = document.createElement('span');
effect.className = 'like-effect';
effect.innerHTML = '❤';
btn.appendChild(effect);
setTimeout(() => effect.remove(), 500);
}
</script>
</body>
</html>点一下按钮，爱心就从按钮顶部“噗”地弹出来，缩放+淡出，干净利落。想换图标？把 ❤ 换成 ✨ 或 ? 就行。
WordPress 用户：插件更省事
如果你用的是 WordPress，别折腾代码。搜一下「WP ULike」或「Post Like System」这两个插件，安装启用后，在后台点几下就能开启点赞按钮，还自带星星飞散、数字跳动等特效，连样式都能在后台调颜色和动画速度。
微信公众号文章？用 GIF 最靠谱
公众号后台不支持 JS 动画，但可以插入 GIF。找一张 1 秒内完成的「点赞爆炸」GIF（搜索“点赞动图 透明背景”），上传到编辑器，设为“居中”“不带边框”，点击时视觉反馈立马有。注意别选太大的文件，不然加载慢。
小提醒
特效不是越多越好。手机上卡顿、老人机打不开动画，建议默认保留基础点击变色，再用 @supports (animation-name: pop) 包一层高级动画，让老设备自动降级——这句先不用深究，记住：能动就动，不动也不崩，才是好特效。