用CSS动画实现“生日快乐”弹跳效果需避免生硬抖动，采用cubic-bezier缓动、2.8s时长、infinite循环及hover控制，并搭配粉红光晕text-shadow；SVG动画优先于GIF，注意iOS和Chrome兼容性；响应式需补充横屏font-size和深色模式配色。
用 CSS 动画实现“生日快乐”文字弹跳效果
纯 HTML + CSS 就能做出有呼吸感的祝福文字，不需要 JS 也能触发动画。关键不是加多少特效，而是让文字动得自然、不刺眼。
常见错误是直接套用 @keyframes bounce 写死 10 次弹跳，结果页面一打开就疯狂抖，用户还没看清字就结束了。
- 用
animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1)模拟真实回弹，比ease-in-out更柔和 - 把动画时长设为
2.8s，配合infinite和pause状态，方便后续用 :hover 控制启停 - 文字本身加
text-shadow: 0 0 12px rgba(255,192,203,0.7)，粉红光晕比描边更轻盈
@keyframes float-up {
0% { transform: translateY(0) scale(1); }
50% { transform: translateY(-12px) scale(1.03); }
100% { transform: translateY(0) scale(1); }
}
h1 {
animation: float-up 2.8s ease-in-out infinite;
}插入 GIF 或 SVG 动画蛋糕时的尺寸与加载陷阱
很多人直接扔一个 5MB 的 GIF 进去，页面卡顿、手机上动图掉帧，还被浏览器标记为“高耗能资源”。真正好用的是轻量 SVG 动画或优化后的 APNG。
注意两个硬性限制：SVG 中的 <animate> 标签在 iOS Safari 15.4+ 才稳定支持；GIF 在 Chrome 110+ 默认禁用自动播放（除非加 loading="eager"）。
立即学习“前端免费学习笔记（深入）”；
- 优先用 inline SVG：把蛋糕路径写进 HTML，用
<animateTransform>控制蜡烛闪烁，体积通常 - 如果必须用 GIF，请用
ffmpeg -i input.gif -vf "scale=320:-1:flags=lanczos" -gifflags +transdiff output.gif压缩 - 给所有动图加
decoding="async"和fetchpriority="low"，避免阻塞首屏渲染
点击触发烟花效果——用 Canvas 而不用第三方库的理由
点一下屏幕就炸出烟花，看似炫酷，但用 particles.js 或 canvas-confetti 很容易拖慢低端安卓机。原生 Canvas 更可控，也更容易关掉动画保性能。
核心逻辑不是画粒子，而是控制生命周期：每个火花对象只存 x、y、vx、vy、life 五个字段，用 requestAnimationFrame 每帧更新，life <= 0 就从数组里 splice 掉。
- 烟花爆发半径别超过
120px，否则在小屏上溢出视口 - 单次点击最多生成
60个粒子，再多就视觉过载且 FPS 下降 - 务必监听
touchstart和click双事件，否则 iOS 上点不动
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
launchFirework(e.clientX - rect.left, e.clientY - rect.top);
});适配手机横屏和深色模式的最小改动方案
很多生日页在 iPhone 横屏下文字挤成一团，或者深色模式下粉红背景变灰紫，不是设计问题，是漏写了两行 CSS。
不要重写整套响应式布局，就在现有样式里补上：
- 加
@media (orientation: landscape)，把font-size改为clamp(1.8rem, 5vw, 3.2rem)，避免横屏时字太小 - 用
@media (prefers-color-scheme: dark)覆盖背景色和阴影色，例如把background: #fff改成background: #1a1a2e，text-shadow的 alpha 值调高到0.9 - 禁用双指缩放：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">，防止祝福语被误缩放变形
复杂点在于动画节奏——横屏时 Canvas 烟花的爆炸半径要同步缩放，深色模式下 SVG 蜡烛的 fill 颜色得单独定义变量。这些细节不加，页面看起来就“差点意思”。
