HTML+CSS+JS 倒计时动画效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_72553980/article/details/139427180

本文展示了如何使用HTML、CSS和JavaScript创建一个倒计时动画效果，详细解析了代码实现思路，包括数字区域的动态进出动画以及倒计时结束后的展示动画。用户还可以点击按钮重新开始倒计时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果演示

10-倒计时动画效果.gif

实现了一个倒计时动画效果，包括数字区域和倒计时结束区域。数字区域显示倒计时数字，数字进入时有动画效果，数字离开时也有动画效果。倒计时结束后，数字区域隐藏，倒计时结束区域显示，显示时也有动画效果。用户可以点击重新开始按钮重新开始倒计时。

Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时动画效果</title>
    <link rel="stylesheet" href="./10-倒计时动画效果.css">
</head>

<body>
    <div class="container">
        <div class="counter">
            <div class="nums">
                <span class="in">3</span>
                <span>2</span>
                <span>1</span>
                <span>0</span>
            </div>
            <h3>准备</h3>
        </div>
        <div class="final">
            <h1>活动开始</h1>
            <button class="replay">重来</button>
        </div>
    </div>
</body>
<script src="./10-倒计时动画效果.js"></script>
</html>

/* 清除所有元素的默认margin和padding */  
* {
     
    margin: 0; /* 清除外边距 */  
    padding: 0; /* 清除内边距 */  
}  
  
/* 设置body的高度为视口高度，并使用flex布局进行居中 */  
body {
     
    height: 100vh; /* 视口高度 */  
    display: flex; /* 弹性布局 */  
    justify-content