热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css实现倒计时效果

CSS教程:本文为大家分享了css实现倒计时效果的方法,具有一定的参考价值,希望可以帮助到大家。

2、倒序摆放图片,因为倒计时间是由大到小的(废话)

3、给图片设置一个边框,平移时效果更佳

假设使用float: top 图片上下之间会出现一些间隔。但使用float: left 同时使用容器限制,使每一张图片换行,不会出现任何间隔

.countdown-container img{
    box-sizing: border-box;
    width: 25px;
    height: 40px;
    border: gray 1px solid;
    float: left;
}

4、小时和分钟的数字切换不能一股脑让他匀速切,得在中间加上停滞,最后用0.1%的时间让其完成切换

@keyframes min{
    0%,
    3.13%,
    3.23% {
        margin-top: 0;
    }
 
    3.23%,
    6.36%,
    6.46% {
        margin-top: -40px;
    }

5、时、分、秒 容器的高度=图片数量*图片高度,动画的总时长= (图片数量+1) * 60(h/m/s) ,记得转换成秒哈

使用ease-out属性值,使切图时更加丝滑~

#countdown-container-min{
    height: 2400px;
    animation: min 1860s ease-out infinite;
}

四、全部代码

1、HTML



    
    
    
    
    


    
:
:

2、CSS

/* 倒计时器 */
.countdown{
    position: relative;
    height: 100px;
    width: 200px;
    margin: 50px;
}
 
/* 小时、分钟、秒之间的分号 : */
#countdown-s1{
    font-size: 30px;
    color: white;
    position: absolute;
    left: 67px;
    top: -3px;
}
 
#countdown-s2{
    font-size: 30px;
    color: white;
    position: absolute;
    left: 120px;
    top: -3px;
}
 
/* 倒计时器容器 */
.countdown-container{
    width: 25px;
    height: 40px;
    overflow: hidden;
    float: left;
    margin-left: 30px;
}
 
.countdown-container img{
    box-sizing: border-box;
    float: left;
    width: 25px;
    height: 40px;
    border: gray 1px solid;
}
 
/* 分钟轮播 */
#countdown-container-min{
    height: 2400px;
    /* 31min,需播放1860s, ease-out用于图片之间慢速停顿过渡*/
    animation: min 1860s ease-out infinite;
}
 
@keyframes min{
    0%,
    3.13%,      /*  加入停滞,使切换时的速度为0.1% */
    3.23% {
        margin-top: 0;
    }
 
    3.23%,
    6.36%,
    6.46% {
        margin-top: -40px;
    }
 
    6.46%,
    9.59%,
    9.69% {
        margin-top: -80px;
    }
 
    9.69%,
    12.82%,
    12.92%  {
        margin-top: -120px;
    }
 
    12.92%,
    16.05%,
    16.15% {
        margin-top: -160px;
    }
 
    16.15%,
    19.28%,
    19.38% {
        margin-top: -200px;
    }
    
    19.38%,
    22.51%,
    22.61% {
        margin-top: -240px;
    }
    
    22.61%,
    25.74%,
    25.84% {
        margin-top: -280px;
    }
    
    25.84%,
    28.97%,
    29.07% {
        margin-top: -320px;
    }
    
    29.07%,
    32.20%,
    32.30% {
        margin-top: -360px;
    }
    
    32.30%,
    35.43%,
    35.53% {
        margin-top: -400px;
    }
    
    35.53%,
    38.66%,
    38.76% {
        margin-top: -440px;
    }
    
    38.76%,
    41.89%,
    41.99% {
        margin-top: -480px;
    }
    
    41.99%,
    45.12%,
    45.22% {
        margin-top: -520px;
    }
    
    45.22%,
    48.35%,
    48.45% {
        margin-top: -560px;
    }
    
    48.45%,
    51.58%,
    51.68% {
        margin-top: -600px;
    }
    
    51.68%,
    54.81%,
    54.91% {
        margin-top: -640px;
    }
    
    54.91%,
    58.04%,
    58.14% {
        margin-top: -680px;
    }
    
    58.14%,
    61.27%,
    61.37% {
        margin-top: -720px;
    }
    
    61.37%,
    64.50%,
    64.60% {
        margin-top: -760px;
    }
    
    64.60%,
    67.73%,
    67.83% {
        margin-top: -800px;
    }
    
    67.83%,
    70.96%,
    71.06% {
        margin-top: -840px;
    }
    
    71.06%,
    74.19%,
    74.29% {
        margin-top: -880px;
    }
    
    74.29%,
    77.42%,
    77.52% {
        margin-top: -920px;
    }
    
    77.52%,
    80.65%,
    80.75% {
        margin-top: -960px;
    }
    
    80.75%,
    83.88%,
    83.98% {
        margin-top: -1000px;
    }
    
    83.98%,
    87.11%,
    87.21% {
        margin-top: -1040px;
    }
    
    87.21%,
    90.34%,
    90.44% {
        margin-top: -1080px;
    }
    
    90.44%,
    93.57%,
    93.67% {
        margin-top: -1120px;
    }
    
    93.67%,
    96.80%,
    96.90% {
        margin-top: -1160px;
    }
    
    96.90%,
    99.90%,
    100% {
        margin-top: -1200px;
    }
}
 
/* 秒轮播 */
#countdown-container-second{
    height: 2400px;
    animation: second 60s ease-out infinite;
}
 
@keyframes second {
    0%,
    1.66% {
        margin-top: 0;
    }
 
    1.66%,
    3.32% {
        margin-top: -40px;
    }
 
    3.32%,
    4.98% {
        margin-top: -80px;
    }
 
    4.98%,
    6.64% {
        margin-top: -120px;
    }
 
    6.64%,
    8.30% {
        margin-top: -160px;
    }
 
    8.30%,
    9.96% {
        margin-top: -200px;
    }
    
    9.96%,
    11.62% {
        margin-top: -240px;
    }
    
    11.62%,
    13.28% {
        margin-top: -280px;
    }
    
    13.28%,
    14.94% {
        margin-top: -320px;
    }
    
    14.94%,
    16.60% {
        margin-top: -360px;
    }
    
    16.60%,
    18.26% {
        margin-top: -400px;
    }
    
    18.26%,
    19.92% {
        margin-top: -440px;
    }
    
    19.92%,
    21.58% {
        margin-top: -480px;
    }
    
    21.58%,
    23.24% {
        margin-top: -520px;
    }
    
    23.24%,
    24.90% {
        margin-top: -560px;
    }
    
    24.90%,
    26.56% {
        margin-top: -600px;
    }
    
    26.56%,
    28.22% {
        margin-top: -640px;
    }
    
    28.22%,
    29.88% {
        margin-top: -680px;
    }
    
    29.88%,
    31.54% {
        margin-top: -720px;
    }
    
    31.54%,
    33.2% {
        margin-top: -760px;
    }
    
    33.20%,
    34.86% {
        margin-top: -800px;
    }
    
    34.86%,
    36.52% {
        margin-top: -840px;
    }
    
    36.52%,
    38.18% {
        margin-top: -880px;
    }
    
    38.18%,
    39.84% {
        margin-top: -920px;
    }
    
    39.84%,
    41.50% {
        margin-top: -960px;
    }
    
    41.50%,
    43.16% {
        margin-top: -1000px;
    }
    
    43.16%,
    44.82% {
        margin-top: -1040px;
    }
    
    44.82%,
    46.48% {
        margin-top: -1080px;
    }
    
    46.48%,
    48.14% {
        margin-top: -1120px;
    }
    
    48.14%,
    49.80% {
        margin-top: -1160px;
    }
    
    49.80%,
    51.46% {
        margin-top: -1200px;
    }
    
    51.46%,
    53.12% {
        margin-top: -1240px;
    }
    
    53.12%,
    54.78% {
        margin-top: -1280px;
    }
    
    54.78%,
    56.44% {
        margin-top: -1320px;
    }
    
    56.44%,
    58.10% {
        margin-top: -1360px;
    }
    
    58.10%,
    59.76% {
        margin-top: -1400px;
    }
    
    59.76%,
    61.42% {
        margin-top: -1440px;
    }
 
    61.42%,
    63.08% {
        margin-top: -1480px;
    }
                
    63.08%,
    64.74% {
        margin-top: -1520px;
    }
    
    64.74%,
    66.40% {
        margin-top: -1560px;
    }
 
    66.40%,
    68.06% {
        margin-top: -1600px;
    }
                
    68.06%,
    69.72% {
        margin-top: -1640px;
    }
    
    69.72%,
    71.38% {
        margin-top: -1680px;
    }
 
    71.38%,
    73.04% {
        margin-top: -1720px;
    }
                
    73.04%,
    74.70% {
        margin-top: -1760px;
    }
    
    74.70%,
    76.36% {
        margin-top: -1800px;
    }
 
    76.36%,
    78.02% {
        margin-top: -1840px;
    }
                
    78.02%,
    79.68% {
        margin-top: -1880px;
    }
    
    79.68%,
    81.34% {
        margin-top: -1920px;
    }
 
    81.34%,
    83.00% {
        margin-top: -1960px;
    }
                
    83.00%,
    84.66% {
        margin-top: -2000px;
    }
    
    84.66%,
    86.32% {
        margin-top: -2040px;
    }
 
    86.32%,
    87.98% {
        margin-top: -2080px;
    }
                
    87.98%,
    89.64% {
        margin-top: -2120px;
    }
    
    89.64%,
    91.30% {
        margin-top: -2160px;
    }
 
    91.30%,
    92.96% {
        margin-top: -2200px;
    }
                
    92.96%,
    94.62% {
        margin-top: -2240px;
    }
    
    94.62%,
    96.28% {
        margin-top: -2280px;
    }
 
    96.28%,
    97.94% {
        margin-top: -2320px;
    }
                
    97.94%,
    100% {
        margin-top: -2360px;
    }
}


推荐阅读
  • Java Web开发中的JSP:三大指令、九大隐式对象与动作标签详解
    在Java Web开发中,JSP(Java Server Pages)是一种重要的技术,用于构建动态网页。本文详细介绍了JSP的三大指令、九大隐式对象以及动作标签。三大指令包括页面指令、包含指令和标签库指令,它们分别用于设置页面属性、引入其他文件和定义自定义标签。九大隐式对象则涵盖了请求、响应、会话、应用上下文等关键组件,为开发者提供了便捷的操作接口。动作标签则通过预定义的动作来简化页面逻辑,提高开发效率。这些内容对于理解和掌握JSP技术具有重要意义。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • 利用CSS技术实现文本的上标和下标效果
    通过运用CSS中的`vertical-align`属性,可以实现文本的上标和下标效果。该属性通常用于调整行内元素的垂直对齐方式,例如在化学公式中表示二氧化碳(CO₂)时,可以将数字“2”设置为下标。此外,`vertical-align`还支持多种值,如`super`、`sub`等,以满足不同的排版需求。 ... [详细]
  • 在第10天的夜灵HTML日志中,我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性,但在旧版浏览器中的支持情况并不理想。然而,目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器,我们提供了多种解决方案,以确保网站在不同环境下的兼容性和用户体验。此外,我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • 捕获并处理用户输入数字时的异常,提供详细的错误提示与指导
    在用户输入数字时,程序能够有效捕获并处理各种异常情况,如非法字符或格式错误,并提供详尽的错误提示和操作指导,确保用户能够准确输入有效的数字数据。通过这种方式,不仅提高了程序的健壮性和用户体验,还减少了因输入错误导致的系统故障。具体实现中,使用了Java的异常处理机制,结合Scanner类进行输入读取和验证,确保了输入的合法性和准确性。 ... [详细]
  • 在面试过程中,面试官常常会提问如何使一个DIV元素实现水平和垂直居中。本文将详细介绍几种常用的实现方法。准备工作包括创建一个父容器和一个子容器,通过不同的CSS属性和技术手段,如Flexbox、Grid布局、绝对定位等,来实现DIV元素的精确居中效果。每种方法都有其适用场景和优缺点,读者可以根据具体需求选择最适合的方案。 ... [详细]
  • VC维在机器学习中的应用与解析
    VC维在机器学习中的应用与解析VC维是指在机器学习中,一个假设空间能够正确分类的最大样本数量。具体而言,如果一个假设空间能够将N个样本以所有可能的 \(2^N\) 种方式完全分开,则称该假设空间具有N的VC维。VC维是衡量模型复杂度的重要指标,对于理解模型的泛化能力和过拟合风险具有重要意义。本文详细探讨了VC维的定义、计算方法及其在机器学习中的应用,并通过实例分析展示了其在模型选择和评估中的关键作用。 ... [详细]
  • C++入门必备:首个博客知识点汇总
    本文总结了C++初学者需要掌握的关键知识点,特别强调了成员类型的区分。其中,protected成员与private成员在本类中的作用相同,但protected成员允许派生类的成员函数访问,而private成员则不允许。此外,文章还介绍了其他重要的C++基础概念,如类的构造函数、析构函数以及继承机制,为初学者提供了一个全面的学习指南。 ... [详细]
  • 在使用Block时,正确的声明方法和确保线程安全是至关重要的。为了保证Block在堆中分配,应使用`copy`修饰符进行声明,因为栈中的Block与栈的生命周期绑定,容易导致内存问题。此外,还需注意Block捕获外部变量的行为,以避免潜在的循环引用和数据不一致问题。建议深入研究相关文档,以掌握更多高级技巧和最佳实践。 ... [详细]
  • 为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]
  • 利用树莓派畅享落网电台音乐体验
    最近重新拾起了闲置已久的树莓派,这台小巧的开发板已经沉寂了半年多。上个月闲暇时间较多,我决定将其重新启用。恰逢落网电台进行了改版,回忆起之前在树莓派论坛上看到有人用它来播放豆瓣音乐,便萌生了同样的想法。通过一番调试,终于实现了在树莓派上流畅播放落网电台音乐的功能,带来了全新的音乐享受体验。 ... [详细]
  • 二叉树的直径是指树中任意两个叶节点之间最长路径上的节点数量。本文深入解析了计算二叉树直径的算法,并提出了一种优化方法,以提高计算效率和准确性。通过详细的案例分析和性能对比,展示了该优化算法在实际应用中的优势。 ... [详细]
  • 本文全面解析了 gRPC 的基础知识与高级应用,从 helloworld.proto 文件入手,详细阐述了如何定义服务接口。例如,`Greeter` 服务中的 `SayHello` 方法,该方法在客户端和服务器端的消息交互中起到了关键作用。通过实例代码,读者可以深入了解 gRPC 的工作原理及其在实际项目中的应用。 ... [详细]
  • 在 JavaScript 中,变量前的加号(+)符号用于将变量转换为数字类型。例如,在 `if (+valueDistance) {}` 语句中,加号的作用类似于 `Number(valueDistance)`,会根据 Number 函数的规则将变量转换为数值或 NaN。这种用法常用于确保变量在进行数值运算时不会出现类型错误。 ... [详细]
author-avatar
猴三爷22_394
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有