刷朋友圈时，手指一点，心形图标‘噗’地炸开；看短视频，双击屏幕，一串小星星‘唰’地往上飘——这些不是魔法，是点赞特效。很多人好奇：点赞特效怎么添加？其实不难，懂点基础 HTML 和 CSS 就能搞定。
先搞清场景：你是在哪加特效？
如果是自己做的个人博客、作品集网页，或者用 WordPress 建的小站，那可以直接改代码；要是用抖音、小红书、微信公众号后台发内容，那抱歉，平台不开放自定义特效接口，只能靠内置动效或第三方插件（比如公众号里嵌 H5 页面）。
最简单的纯 CSS 点赞动画（适合新手）
复制下面这段代码，粘贴到你网页的 <body> 末尾，再加一个按钮试试：
<button id="likeBtn">👍 点我点赞</button>
<style>
.like-anim {
position: absolute;
font-size: 24px;
pointer-events: none;
animation: floatUp 0.8s ease-out forwards;
}
@keyframes floatUp {
0% { opacity: 1; transform: scale(1) translateY(0); }
100% { opacity: 0; transform: scale(1.3) translateY(-60px); }
}
</style>
<script>
document.getElementById('likeBtn').addEventListener('click', function(e) {
const heart = document.createElement('span');
heart.className = 'like-anim';
heart.textContent = '❤️';
heart.style.left = e.clientX + 'px';
heart.style.top = e.clientY + 'px';
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 800);
});
</script>点一下按钮，爱心就从你点击的位置弹起来，渐隐消失。想换图标？把 '❤️' 换成 '✨' 或 '🔥' 就行。
进阶一点：用 GSAP 做更丝滑的粒子特效
如果追求电影感，可以引入轻量动画库 GSAP（官网下载 gsap.min.js，或 CDN 引入）。加完后这样写：
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
document.getElementById('likeBtn').addEventListener('click', function(e) {
const count = 5;
for (let i = 0; i < count; i++) {
const star = document.createElement('span');
star.textContent = '⭐';
star.style.cssText = `position:fixed;top:${e.clientY}px;left:${e.clientX}px;font-size:18px;pointer-events:none;`;
document.body.appendChild(star);
gsap.to(star, {
duration: 1,
x: (Math.random() - 0.5) * 120,
y: -(Math.random() * 80 + 40),
opacity: 0,
rotate: Math.random() * 360,
onComplete: () => star.remove()
});
}
});
</script>一次点击，五颗小星星朝不同方向飞出去，带旋转和淡出，手机上也挺流畅。
提醒一句：别为了特效牺牲体验
有人一口气加七八种动效，结果页面卡顿、按钮点不动、老人机直接白屏。点赞特效本质是锦上添花，不是主角。建议控制单次触发动画数 ≤6 个，总时长别超 1 秒，关键按钮保留原生反馈（比如按下去变灰）。
另外，记得加 prefers-reduced-motion: reduce 媒体查询，照顾开启“减少动画”的用户——这是细节，也是尊重。