一、实现效果截图

(学习视频推荐：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: -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;

}

}

相关推荐：CSS教程

倒计时 css,css实现倒计时效果相关推荐

  1. HTML5七夕情人节表白网页(结婚倒计时) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白

    HTML5七夕情人节表白网页❤结婚倒计时❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白 ...

  2. 纯CSS制作的图形效果

    纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...

  3. css实现tab切换效果

    <div class="match-instruction"><div id="tab2" class="mi-cont" ...

  4. 不可思议的纯 CSS 实现鼠标跟随效果

    不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...

  5. php3d按钮,CSS实现3D按钮效果

    这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...

  6. css编写的技巧效果总结

    1. 垂直对齐 如果你之前遇到过这个问题,你就应该知道它是多么的烦人,幸运的是,现在你可以使用CSS3变换来解决这个问题: .vc{ position: relative; top: 50%; -we ...

  7. [css] 用css实现倒影的效果

    [css] 用css实现倒影的效果 box-reflect 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

  8. [css] 使用css实现彩虹的效果

    [css] 使用css实现彩虹的效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...

  9. [css] 使用css实现蒙版的效果

    [css] 使用css实现蒙版的效果 filter: blur(1px) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面 ...

  10. css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...

    纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...

最新文章

  1. 只要60页！牛逼不行的Python数据分析入门知识手册
  2. R语言保存图片为特定dpi值（分辨率）的图像
  3. （七）日志采集工具sleuth--分布式链路跟踪（zipkin）
  4. javascript字符串截取
  5. halcon算子盘点：Chapter 18:元组Tuple
  6. Matlab图像处理创新实践-实验2【图像滤波基础（2）】
  7. SAP OData执行的后台跟踪工具
  8. linux发展前景2018,2018 年 Linux 的 8 个发展预测
  9. plsql 导出分区_plsql批量导出数据库数据
  10. UG与PROE哪个好用，主要看是用在哪里
  11. 【收藏的一些博客地址-后端开发】
  12. 实例6.1 六度空间 (30 分)+C语言实现
  13. 董孝魁：通证经济重塑企业价值，区块链应赋能服务实体
  14. 如何用AI伴侣同步测试App Inventor软件
  15. FITC cy3/cy5荧光标记达卡巴嗪/托瑞米芬/盐酸阿霉素/替莫唑胺等药物 FITC-DTIC
  16. C++的get()函数与getline()函数使用详解
  17. linux对外开放端口号
  18. 现代化物流对应术语解释
  19. 国产音频压缩格式JLM——JLM音频播放
  20. 申请软著流程(附带软著源码整理工具、申请软著文档的模板)

热门文章

  1. 学习使用php实现公历农历转换的方法代码
  2. 各向异性元件中的偏振效应
  3. TCP协议——SYN/ACK的使用以及滑动窗口机制
  4. 夏普Sharp MX-B401 一体机驱动
  5. 怎样把word文档生成二维码？word如何制作二维码？
  6. 微信开放平台之第三方授权开发
  7. 汉语言01C1501,2019年北京自考汉语言文学（本科）专业（01C1501）要考哪些科目？...
  8. k8s部署prometheus的相关配置
  9. 高中信息技术课程标准读后感
  10. MySQL数据分析－（13）表操作补充：索引