CSS初级项目如何制作倒计时效果_animation keyframes与transform配合-css教程-PHP中文网

CSS初级项目如何制作倒计时效果_animation keyframes与transform配合

P粉602998670

发布： 2025-11-30 20:15:11

原创

844人浏览过

使用@keyframes定义缩放动画，通过animation-delay控制延迟，使3、2、1依次放大后消失，实现倒计时效果。

css初级项目如何制作倒计时效果_animation keyframes与transform配合

要制作一个简单的倒计时效果，可以使用 CSS 的 @keyframes 和 transform 属性配合实现动画。这种做法适合在静态页面或初级项目中展示动态的数字变化或进度感，比如模拟秒表、倒数转场等视觉效果。

1. 使用 @keyframes 定义动画流程

通过 @keyframes 可以定义动画的关键帧，控制元素在不同时间点的状态。例如，让一个数字从放大到缩小，模拟“跳动”消失的效果。

@keyframes countdown {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

登录后复制

这个动画从正常大小放大到 1.2 倍，再缩小到完全消失，配合透明度变化，产生一种“弹出后消失”的视觉效果。

2. 应用 animation 到数字容器

将上述动画绑定到显示数字的元素上，并设置持续时间和播放次数。假设你有三个 span 分别代表 3、2、1 的倒计时：

立即学习“前端免费学习笔记（深入）”；

.countdown-number {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  background: #ff4500;
  color: white;
  border-radius: 50%;
  margin: 10px;
  animation: countdown 1s ease-in-out;
}

登录后复制

每个数字出现时都会执行一次缩放消失动画。为了让它们依次播放，可使用 animation-delay 控制延迟。

秒哒

秒哒-不用代码就能实现任意想法

349

查看详情

3. 控制多个数字依次动画

给每个数字设置不同的延迟时间，实现逐个倒数的效果：

#num-3 { animation-delay: 0s; }
#num-2 { animation-delay: 1s; }
#num-1 { animation-delay: 2s; }

登录后复制

这样第一个数字立刻开始动画，第二个在 1 秒后，第三个在 2 秒后，形成 3→2→1 的倒计时节奏。

4. HTML 结构示例

结合以上样式，HTML 可以这样写：

<div class="countdown">
  <span class="countdown-number" id="num-3">3</span>
  <span class="countdown-number" id="num-2">2</span>
  <span class="countdown-number" id="num-1">1</span>
</div>

登录后复制

页面加载后，三个数字会依次放大并消失，完成倒计时动画。

基本上就这些。利用 transform 实现形变，配合 animation 控制播放时机，就能做出简洁有力的倒计时视觉效果，适合新手练习动画逻辑和时间控制。

以上就是CSS初级项目如何制作倒计时效果_animation keyframes与transform配合的详细内容，更多请关注php中文网其它相关文章！