css实现倒计时效果

程序猿 • 2025年12月24日 05:09:52 • 好文分享 • 阅读 0

一、实现效果截图

（学习视频推荐：css视频教程）

二、实现原理

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

看到上图效果应该很容易猜到原理，纯CSS的话使用轮播。通过改变图片的margin-top，再加上亿点点动画，亿点点数字图片，就实现了。

使用PS建数字图片：

然后

架结构

三、实现细节

1、纯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

            倒计时                html{            background-color: black;        }                                            @@##@@            
        
        :                                    @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@            
        
        :                                    @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@                @@##@@

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: -1241240px;    }        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;    }}

关于作者

程序猿签约作者

409.4K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

你可能还不知道的7个惊人的css属性！

上一篇 2025年12月24日 05:09:49

CleverCSS是什么？

下一篇 2025年12月24日 05:09:54

CleverCSS是什么？

CleverCSS是一个用于css的小型标记语言，从Python得到灵感，采用通过简单和干净的结构方式，它可用于以整洁和结构化的方式创建一个样式表；CleverCSS与CSS最明显的区别是句法，它基于缩进而且不单调。 CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以…

程序猿
好文分享 2025年12月24日
0000
你可能还不知道的7个惊人的css属性！

推荐教程：CSS视频教程学习CSS是构建好看网页的一种方式。但是，在学习过程中，我们倾向于（大部分时间）限制自己，一遍又一遍地使用相同的属性。毕竟，我们是一种习惯性的动物，我们会使用自己习惯且熟悉的东西。因此，在这篇文章中，向你介绍7个比较少见且好用的 CSS 属性，希望对你有所帮助。 1…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

响应式css前端框架有哪些

响应式css前端框架有：1、Semantic UI Framework；2、Less Framework；3、Foundation Framework；4、UIkit Framework；5、YUI Framework。常用的响应式css前端框架（部分）：（学习视频推荐：css视频教程） 1、S…

程序猿
2025年12月24日
0000
css盒模型有哪些属性

css盒模型的属性有：1、margin属性；2、border属性；3、transparent属性；4、padding属性。本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。 CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

css中的animation是什么

css中的animation是一个简写属性，用于设置动画属性，如【animation-duration】，规定完成动画所花费的时间，该属性必须规定，否则动画时长为0，无法播放。本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。 animation 属性是一个简写属性，用于…

程序猿
2025年12月24日
0000
好文分享

css为什么会出现清除浮动的问题

css出现清除浮动的问题的原因：在标准流下面，父元素没有设置高度属性，且父元素中的子元素是浮动，由于浮动元素不再占用原文档流的位置，浮动元素的高度不会计算在父元素的高度中，即呈现塌陷的状态。本教程操作环境：windows10系统、css3，本文适用于所有品牌的电脑。一、为什么会出现清除浮动的问题…

程序猿
2025年12月24日
0000
好文分享

css怎么改变hr标签颜色

css改变hr标签颜色的方法：可以利用background-color属性，并结合border和height属性来实现。border属性是为了防止出现黑框，height属性是为了防止在firefox下不显示。首先我们要知道，如果要修改hr标签的颜色，那么单纯用background-color属性是…

程序猿
2025年12月24日
0000
css圆角属性是什么

css圆角属性是border-radius，通过该属性我们可以给任何元素制作圆角，例如【border-radius: 15px 50px 30px 5px】。如果我们在border-redius属性中只指定一个值，那么将生成四个圆角。圆角属性即 border-radius 属性，通过该属性我们可以…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

css如何让盒子浮动

css让盒子浮动的方法：可以利用float属性来实现，如【float: left;】。float属性可以让多个盒子水平排列成一行、居左或居右，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻…

程序猿
2025年12月24日
0000
css的display属性有哪些

css的display属性有：1、【display: none】把元素隐藏；2、【display: inline】把块级标签变成内联标签；3、【display: block】把内联标签变成块级标签。 css的display属性有： 1、display: none：把元素隐藏，物理位置也不在了. 2、…

程序猿
2025年12月24日 • 好文分享
0000
CSS如何实现自适应分隔线？方法介绍

CSS如何实现自适应分隔线？下面CSS栏目就来给大家介绍一下CSS实现自适应分隔线的N种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。（推荐教程：CSS教程）分割线是网页中比较常见的一类设计了，比如说知乎的更多回答立即学习“前端免费学习笔记（深入）”；这里的自适应是指…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

详解CSS中的Media媒体查询

一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容。（推荐教程：CSS教程）媒介类型在CSS2中，媒体查询只使用于和标签中，以media属性存在 …

程序猿
2025年12月24日
0000
好文分享

css怎么使用外部艺术字

因为系统自带的字体样式很少，并且多数不好看，所以有了引入外部艺术字体的想法。（视频教程推荐：css视频教程）方法如下： .shopName { /*使用你自己的字体*/ font-family:fusanghu; font-style: oblique; font-size: 29px; fon…

程序猿
2025年12月24日
0000
使用css grid构建复杂布局的小技巧！（值得收藏）

（推荐教程：CSS教程）网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中，将会介绍所有我们需要了解的 CSS 网格知识。 CSS 网格的基础知识我们直接进入代码，如下所示，先写些标签，源码在这个链接里面：h…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

你知道怎么使用纯css来实现下拉菜单效果么

具体实现步骤如下：（视频教程推荐：css视频教程） 1、用ul 和 li标签写一个关联结构（ul 和 li的父子关系浑然天成，一般的关联结构都用它们）服装衬衫棉袄裤衩 2、对界面进行初始化立即学习“前端免费学习笔记（深入）”； *{ padding: 0; margin: 0; } 3、…

程序猿
2025年12月24日
0000
好文分享

你知道怎么利用css实现内凹圆角么

本文利用径向渐变来实现背景透明的内凹圆角。（视频教程推荐：css视频教程）基本线性渐变 div { height: 100px; width: 200px; background-image: linear-gradient(90deg, red, blue);}从左到右的红到蓝渐变加百分比调…

程序猿
2025年12月24日
0000
css line-height值为150%或1.5值的区别

下面css栏目给大家介绍一下line-height:150%与line-height:1.5的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。（推荐教程：CSS视频教程）这是一个小小的不经意的问题，但是却常常被一些面试官提起。一般都会一下子进入懵逼状态，那让我们来看看区别在…

程序猿
2025年12月24日 • 好文分享
0000
深入浅析css中的z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（推荐教程：CSS视频教程）层级关系的比较 1. 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。立即学习“前端免费学习笔记（深入）”； 2. 对于同级元素…

程序猿
2025年12月24日 • 好文分享
0000
好文分享

css实现图片在div中居中的方法有哪些

本文为大家介绍了图片在div中居中的四种方法，希望对大家有所帮助。方法一：（推荐教程：css视频教程） html：立即学习“前端免费学习笔记（深入）”； @@##@@ css .title { width: 100%; font-size: 0; height: 10%;}.title .co…

程序猿
2025年12月24日
0000
css如何制作饼状图

前言：在工作中，有时我们会有饼状图的需求，如统计图表、进度指示器、定时器等，当然，实现方式也有很多，甚至有现成的js库可以拿来直接使用。兴趣使然，自己动手利用纯css实现饼状图，看看效果如何。（视频教程推荐：css视频教程） .pie { width: 100px; height: 100px;…

程序猿
2025年12月24日 • 好文分享
0000

发表回复

登录后才能评论

css实现倒计时效果

关于作者

相关推荐

发表回复