css实现倒计时效果
发布时间：2025-09-29 点击：7
一、实现效果截图
（学习视频推荐：css视频教程）
二、实现原理
看到上图效果应该很容易猜到原理，纯css的话使用轮播。通过改变图片的margin-top，再加上亿点点动画，亿点点数字图片，就实现了。
使用ps建数字图片：
然后
架结构
三、实现细节
1、纯css轮播论坛里有很多这里就不细讲啦！
总之就是利用轮播的效果，让图片由下至上的动画实现
2、倒序摆放图片，因为倒计时间是由大到小的（废话）
<div class="countdown-container"> <div id="countdown-container-min"> <img src="../jd/img/countdown/30.png" /> <img src="../jd/img/countdown/29.png" /> <img src="../jd/img/countdown/28.png" /> </div></div>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%%u7684时间让其完成切换
@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
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时</title> <link rel="stylesheet" href="./css/countdown.css"> <style> html{ background-color: black; } </style></head><body> <div> <div> <div id="countdown-container-hour"> <img src="../jd/img/countdown/00.png"> </div> </div> <span id="countdown-s1">:</span> <div> <div id="countdown-container-min"> <img src="../jd/img/countdown/30.png" /> <img src="../jd/img/countdown/29.png" /> <img src="../jd/img/countdown/28.png" /> <img src="../jd/img/countdown/27.png" /> <img src="../jd/img/countdown/26.png" /> <img src="../jd/img/countdown/25.png" /> <img src="../jd/img/countdown/24.png" /> <img src="../jd/img/countdown/23.png" /> <img src="../jd/img/countdown/22.png" /> <img src="../jd/img/countdown/21.png" /> <img src="../jd/img/countdown/20.png" /> <img src="../jd/img/countdown/19.png" /> <img src="../jd/img/countdown/18.png" /> <img src="../jd/img/countdown/17.png" /> <img src="../jd/img/countdown/16.png" /> <img src="../jd/img/countdown/15.png" /> <img src="../jd/img/countdown/14.png" /> <img src="../jd/img/countdown/13.png" /> <img src="../jd/img/countdown/12.png" /> <img src="../jd/img/countdown/11.png" /> <img src="../jd/img/countdown/10.png" /> <img src="../jd/img/countdown/09.png" /> <img src="../jd/img/countdown/08.png" /> <img src="../jd/img/countdown/07.png" /> <img src="../jd/img/countdown/06.png" /> <img src="../jd/img/countdown/05.png" /> <img src="../jd/img/countdown/04.png" /> <img src="../jd/img/countdown/03.png" /> <img src="../j
一个include命令可以指定多个被包含的文件？
服务器不稳定-虚拟主机/数据库问题
php 5.5 5.6的区别有哪些
如何免费申请一个域名
在阿里云上哪里如何租用服务器
云服务器怎么发送ftp
阿里云服务器映射本地硬盘
云服务器怎么安装
（学习视频推荐：css视频教程）
二、实现原理
看到上图效果应该很容易猜到原理，纯css的话使用轮播。通过改变图片的margin-top，再加上亿点点动画，亿点点数字图片，就实现了。
使用ps建数字图片：
然后
架结构
三、实现细节
1、纯css轮播论坛里有很多这里就不细讲啦！
总之就是利用轮播的效果，让图片由下至上的动画实现
2、倒序摆放图片，因为倒计时间是由大到小的（废话）
<div class="countdown-container"> <div id="countdown-container-min"> <img src="../jd/img/countdown/30.png" /> <img src="../jd/img/countdown/29.png" /> <img src="../jd/img/countdown/28.png" /> </div></div>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%%u7684时间让其完成切换
@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
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时</title> <link rel="stylesheet" href="./css/countdown.css"> <style> html{ background-color: black; } </style></head><body> <div> <div> <div id="countdown-container-hour"> <img src="../jd/img/countdown/00.png"> </div> </div> <span id="countdown-s1">:</span> <div> <div id="countdown-container-min"> <img src="../jd/img/countdown/30.png" /> <img src="../jd/img/countdown/29.png" /> <img src="../jd/img/countdown/28.png" /> <img src="../jd/img/countdown/27.png" /> <img src="../jd/img/countdown/26.png" /> <img src="../jd/img/countdown/25.png" /> <img src="../jd/img/countdown/24.png" /> <img src="../jd/img/countdown/23.png" /> <img src="../jd/img/countdown/22.png" /> <img src="../jd/img/countdown/21.png" /> <img src="../jd/img/countdown/20.png" /> <img src="../jd/img/countdown/19.png" /> <img src="../jd/img/countdown/18.png" /> <img src="../jd/img/countdown/17.png" /> <img src="../jd/img/countdown/16.png" /> <img src="../jd/img/countdown/15.png" /> <img src="../jd/img/countdown/14.png" /> <img src="../jd/img/countdown/13.png" /> <img src="../jd/img/countdown/12.png" /> <img src="../jd/img/countdown/11.png" /> <img src="../jd/img/countdown/10.png" /> <img src="../jd/img/countdown/09.png" /> <img src="../jd/img/countdown/08.png" /> <img src="../jd/img/countdown/07.png" /> <img src="../jd/img/countdown/06.png" /> <img src="../jd/img/countdown/05.png" /> <img src="../jd/img/countdown/04.png" /> <img src="../jd/img/countdown/03.png" /> <img src="../j
一个include命令可以指定多个被包含的文件？
服务器不稳定-虚拟主机/数据库问题
php 5.5 5.6的区别有哪些
如何免费申请一个域名
在阿里云上哪里如何租用服务器
云服务器怎么发送ftp
阿里云服务器映射本地硬盘
云服务器怎么安装
下一篇：我想申请代理平台-市场咨询