H5 中怎么用 @keyframes 实现红包倒计时数字跳动的警示红光动画-H5教程-PHP中文网

H5红包倒计时需用@keyframes实现数字跳动与警示红光双动画：数字用scale缩放模拟弹跳，红光用box-shadow渐变营造呼吸式警示效果，并通过JS动态切换class精准触发动画重播。

h5 中怎么用 @keyframes 实现红包倒计时数字跳动的警示红光动画

在 H5 页面中实现红包倒计时数字跳动 + 警示红光动画，核心是用 @keyframes 分别控制两个视觉层：数字本身的“跳动”（缩放/位移）和背景/边框的“红光闪烁”（颜色与透明度变化），再通过 animation 同时应用到同一元素（如倒计时数字容器）上。

1. 数字跳动动画（轻微弹跳感）

模拟数字更新时的轻量反馈，避免生硬切换。推荐用 scale 和 transform 配合 ease-out 实现自然回弹：

@keyframes numberBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); } /* 稍微放大 */
  100% { transform: scale(1); }
}

使用时给数字容器（如 5）添加：

.countdown-digit {
  display: inline-block;
  animation: numberBounce 0.3s ease-out;
  /* 触发重播需动态修改 animation-name 或 keyframe 名（见下文） */
}

2. 警示红光动画（呼吸式红光）

强调紧迫感，用红色渐变+半透明白光叠加，营造“警示灯”效果。关键点：不只改 color，要作用于 box-shadow 或 background 才有光晕感：

@keyframes redPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 69, 0, 0);
  }
}

搭配使用（可叠加在同一个元素上）：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

.countdown-digit {
  animation: 
    numberBounce 0.3s ease-out,
    redPulse 1.8s infinite;
}

3. 倒计时中精准触发动画（关键技巧）

数字每秒变化一次，但 CSS 动画默认不会因 textContent 改变而重播。必须手动重置动画状态：

方法一（推荐）：每次更新数字时，临时移除再添加 class
方法二：用 JS 修改 animation-name 加时间戳后缀强制刷新
方法三（简洁）：利用 animation-play-state 暂停后立即播放

示例（方法一）：

function updateCountdown(num) {
  const el = document.querySelector('.countdown-digit');
  el.textContent = num;
  el.classList.remove('animate');
  // 强制重排，确保移除生效
  void el.offsetWidth;
  el.classList.add('animate');
}
<p>/<em> CSS 中定义 </em>/
.animate {
animation: numberBounce 0.3s ease-out, redPulse 1.8s infinite;
}</p>