AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

HTML+CSS+JS 倒计时动画效果

2024-06-26 77
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： HTML+CSS+JS 倒计时动画效果

1.整体效果

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

2.完整代码

HTML

<!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" type="text/css" href="6_12.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="6_12.js"></script>  
</html>

CSS

/* 清除所有元素的默认margin和padding */  
* {  
    margin: 0; /* 清除外边距 */    padding: 0; /* 清除内边距 */}  
  
/* 设置body的高度为视口高度，并使用flex布局进行居中 */body {  
    height: 100vh; /* 视口高度 */    display: flex; /* 弹性布局 */    justify-content: center; /* 主轴居中对齐 */    align-items: center; /* 交叉轴居中对齐 */    background: linear-gradient(to bottom, #fdfbfb, #ebedee); /* 背景线性渐变，从上到下 */}  
  
/* 容器元素，设置为相对定位 */.container {  
    position: relative; /* 相对定位 */}  
  
/* 计数器容器，宽度100%，文本居中对齐 */.counter {  
    width: 100%; /* 宽度100% */  
    text-align: center; /* 文本居中对齐 */}  
  
/* 隐藏计数器动画 */.counter.hide {  
    transform: scale(0); /* 缩放到0 */  
    animation: hide 0.2s ease-out; /* 应用名为hide的动画，持续0.2秒，使用ease-out缓动函数 */}  
  
/* 数字容器样式 */.nums {  
    width: 250px; /* 宽度250px */  
    height: 80px; /* 高度80px */  
    color: #5696ff; /* 字体颜色 */    font-size: 80px; /* 字体大小 */    font-weight: bold; /* 字体加粗 */    display: flex; /* 弹性布局 */    justify-content: center; /* 主轴居中对齐 */    align-items: center; /* 交叉轴居中对齐 */    margin-bottom: 15px; /* 下边距15px */  
    position: relative; /* 相对定位 */    overflow: hidden; /* 溢出内容隐藏 */}  
  
/* 数字容器内的span元素样式 */.nums span {  
    position: absolute; /* 绝对定位 */    transform-origin: bottom center; /* 变换原点设置在底部中心 */    transform: rotate(120deg); /* 旋转120度 */}  
  
/* 数字进入动画 */.nums span.in {  
    animation: goIn 0.5s ease-in-out; /* 应用名为goIn的动画，持续0.5秒，使用ease-in-out缓动函数 */}  
  
/* 数字退出动画 */.nums span.out {  
    animation: goOut 0.5s ease-in-out; /* 应用名为goOut的动画，持续0.5秒，使用ease-in-out缓动函数 */}  
  
/* 最终显示的内容容器样式 */.final {  
    position: absolute; /* 绝对定位 */    top: 0; /* 顶部对齐 */    left: 0; /* 左侧对齐 */    width: 100%; /* 宽度100% */  
    text-align: center; /* 文本居中对齐 */    transform: scale(0); /* 缩放到0 */  
}  
  
/* 最终显示内容显示动画 */.final.show {  
    transform: scale(1); /* 缩放到1 */  
    animation: show 0.3s ease-in; /* 应用名为show的动画，持续0.3秒，使用ease-in缓动函数 */}  
  
/* 重播按钮样式 */.replay {  
    width: 100%; /* 宽度100% */  
    background-color: #5696ff; /* 背景颜色 */    color: #fff; /* 字体颜色 */    border: none; /* 无边框 */    padding: 10px 0; /* 上下内边距10px */  
    margin-top: 20px; /* 上边距20px */  
    cursor: pointer; /* 鼠标悬停时变为手形图标 */}  
  
/* 隐藏动画：从正常大小逐渐缩小到0 */  
@keyframes hide {  
    0% {  
        transform: scale(1); /* 动画开始时，元素为正常大小 */    }  
  
    100% {  
        transform: scale(0); /* 动画结束时，元素缩小到0 */  
    }  
}  
  
/* 显示动画：从0开始放大，稍微超过正常大小，然后回到正常大小 */@keyframes show {  
    0% {  
        transform: scale(0); /* 动画开始时，元素为0大小 */    }  
  
    80% {  
        transform: scale(1.4); /* 动画过程中，元素放大到1.4倍大小 */    }  
  
    100% {  
        transform: scale(1); /* 动画结束时，元素回到正常大小 */    }  
}  
  
/* 进入动画：数字从旋转120度逐渐恢复到0度 */@keyframes goIn {  
    0% {  
        transform: rotate(120deg); /* 动画开始时，元素旋转120度 */    }  
  
    30% {  
        transform: rotate(-20deg); /* 动画过程中，元素旋转到-20度 */    }  
  
    60% {  
        transform: rotate(10deg); /* 动画过程中，元素旋转到10度 */    }  
  
    90%,  
    100% {  
        transform: rotate(0); /* 动画结束前和结束时，元素旋转到0度 */    }  
}  
  
/* 退出动画：数字从0度逐渐旋转到-120度 */@keyframes goOut {  
    0%,  
    30% {  
        transform: rotate(0); /* 动画开始时和动画过程中，元素为0度 */    }  
  
    60% {  
        transform: rotate(20deg); /* 动画过程中，元素旋转到20度 */    }  
  
    100% {  
        transform: rotate(-120deg); /* 动画结束时，元素旋转到-120度 */    }  
}

JavaScript

// 获取所有类名为'nums'的元素下的'span'子元素，并将它们存储在'nums'数组中  
const nums = document.querySelectorAll('.nums span');  
  
// 获取类名为'counter'的元素，并存储在'counter'变量中  
const counter = document.querySelector('.counter');  
  
// 获取类名为'final'的元素，并存储在'final'变量中  
const final = document.querySelector('.final');  
  
// 获取类名为'replay'的元素，并存储在'replay'变量中  
const replay = document.querySelector('.replay');  
  
// 重置函数：将界面重置为初始状态  
function reset() {  
    // 移除'counter'元素上的'hide'类，使其可见  
    counter.classList.remove('hide');  
    // 移除'final'元素上的'show'类，使其隐藏  
    final.classList.remove('show');  
    // 遍历'nums'数组中的每个元素  
    nums.forEach(num => {  
        // 移除当前'span'元素上的所有类名  
        num.className = '';  
    });  
    // 给'nums'数组中的第一个'span'元素添加'in'类，使其开始进入动画  
    nums[0].classList.add('in');  
}  
  
// 运行函数：为'nums'数组中的每个'span'元素添加动画结束事件监听器  
function run() {  
    nums.forEach((num, index) => {  
        // 当动画结束时触发此函数  
        num.addEventListener('animationend', e => {  
            // 如果动画名称为'goIn'且当前元素不是最后一个元素  
            if (e.animationName === 'goIn' && index !== nums.length - 1) {  
                // 移除当前元素的'in'类，使其停止进入动画  
                num.classList.remove('in');  
                // 给当前元素添加'out'类，使其开始退出动画  
                num.classList.add('out');  
            }  
            // 如果动画名称为'goOut'且当前元素有下一个兄弟元素  
            else if (e.animationName === 'goOut' && num.nextElementSibling) {  
                // 给下一个兄弟元素添加'in'类，使其开始进入动画  
                num.nextElementSibling.classList.add('in');  
            }  
            // 如果以上条件都不满足（即最后一个元素动画结束）  
            else {  
                // 隐藏'counter'元素  
                counter.classList.add('hide');  
                // 显示'final'元素  
                final.classList.add('show');  
            }  
        })  
    })  
}  
  
// 当'replay'元素被点击时，触发重置和运行函数  
replay.addEventListener('click', function () {  
    reset();  
    run();  
});  
  
// 页面加载完成后立即运行run函数  
run();
文章标签：
前端开发
JavaScript
关键词：
HTML js
CSS js
HTML CSS
HTML css js
HTML CSS JavaScript
写代码的大学生
目录
相关文章
二二*一一
|
8天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
26 1
进步`于辰
|
10天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
33 1
[HTML、CSS]细节与使用经验
进步`于辰
|
12天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
26 1
[HTML、CSS]知识点
游客g5tp3lgf24cqc
|
7天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
35 12
大树营养快线
|
12天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量？
【10月更文挑战第28天】通过以上方法，可以在JavaScript中灵活地访问和修改CSS变量，从而实现根据用户交互、页面状态等动态地改变页面样式，为网页添加更多的交互性和动态效果。在实际应用中，可以根据具体的需求和场景选择合适的方法来操作CSS变量。
大树营养快线
53 15
八百标兵奔北坡
|
3天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能；Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
八百标兵奔北坡
10 1
温轻舟
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
27 1
蓝易云
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
18 3
大树营养快线
|
12天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值？
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化，根据不同的应用场景和需求，可以选择合适的方法来实现CSS变量的动态修改，从而提高页面的灵活性和用户体验。
大树营养快线
29 5
萤火虫的小尾巴
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
萤火虫的小尾巴
100 0