立即注册
 登录
切换到宽版
开阔云»论坛 › 群组 › 行业交流 › Web技术教程 › CSS3 实现倒计时效果
Web技术教程
群主admin 天启
网页技术交流
 
发新帖
楼主: 零五零八
查看: 765|回复: 0

[使用教程] CSS3 实现倒计时效果

[复制链接]
零五零八 发表于 2020-12-3 19:08:39 | 显示全部楼层
实现效果


1.gif

实现代码


html


  1. <div class='wrapper'>
  2.   <div class='time-part-wrapper'>
  3.     <div class='time-part minutes tens'>
  4.       <div class='digit-wrapper'>
  5.         <span class='digit'>0</span>
  6.         <span class='digit'>5</span>
  7.         <span class='digit'>4</span>
  8.         <span class='digit'>3</span>
  9.         <span class='digit'>2</span>
  10.         <span class='digit'>1</span>
  11.         <span class='digit'>0</span>
  12.       </div>
  13.     </div>
  14.     <div class='time-part minutes ones'>
  15.       <div class='digit-wrapper'>
  16.         <span class='digit'>0</span>
  17.         <span class='digit'>9</span>
  18.         <span class='digit'>8</span>
  19.         <span class='digit'>7</span>
  20.         <span class='digit'>6</span>
  21.         <span class='digit'>5</span>
  22.         <span class='digit'>4</span>
  23.         <span class='digit'>3</span>
  24.         <span class='digit'>2</span>
  25.         <span class='digit'>1</span>
  26.         <span class='digit'>0</span>
  27.       </div>
  28.     </div>
  29.   </div>
  30.   <div class='time-part-wrapper'>
  31.     <div class='time-part seconds tens'>
  32.       <div class='digit-wrapper'>
  33.         <span class='digit'>0</span>
  34.         <span class='digit'>5</span>
  35.         <span class='digit'>4</span>
  36.         <span class='digit'>3</span>
  37.         <span class='digit'>2</span>
  38.         <span class='digit'>1</span>
  39.         <span class='digit'>0</span>
  40.       </div>
  41.     </div>
  42.     <div class='time-part seconds ones'>
  43.       <div class='digit-wrapper'>
  44.         <span class='digit'>0</span>
  45.         <span class='digit'>9</span>
  46.         <span class='digit'>8</span>
  47.         <span class='digit'>7</span>
  48.         <span class='digit'>6</span>
  49.         <span class='digit'>5</span>
  50.         <span class='digit'>4</span>
  51.         <span class='digit'>3</span>
  52.         <span class='digit'>2</span>
  53.         <span class='digit'>1</span>
  54.         <span class='digit'>0</span>
  55.       </div>
  56.     </div>
  57.   </div>
  58.   <div class='time-part-wrapper'>
  59.     <div class='time-part hundredths tens'>
  60.       <div class='digit-wrapper'>
  61.         <span class='digit'>0</span>
  62.         <span class='digit'>9</span>
  63.         <span class='digit'>8</span>
  64.         <span class='digit'>7</span>
  65.         <span class='digit'>6</span>
  66.         <span class='digit'>5</span>
  67.         <span class='digit'>4</span>
  68.         <span class='digit'>3</span>
  69.         <span class='digit'>2</span>
  70.         <span class='digit'>1</span>
  71.         <span class='digit'>0</span>
  72.       </div>
  73.     </div>
  74.     <div class='time-part hundredths ones'>
  75.       <div class='digit-wrapper'>
  76.         <span class='digit'>0</span>
  77.         <span class='digit'>9</span>
  78.         <span class='digit'>8</span>
  79.         <span class='digit'>7</span>
  80.         <span class='digit'>6</span>
  81.         <span class='digit'>5</span>
  82.         <span class='digit'>4</span>
  83.         <span class='digit'>3</span>
  84.         <span class='digit'>2</span>
  85.         <span class='digit'>1</span>
  86.         <span class='digit'>0</span>
  87.       </div>
  88.     </div>
  89.   </div>
  90. </div>
复制代码


css

  1. /* Play with speed and easing of the animation */
  2. /* =========================================== */
  3. .digit {
  4.   display: inline-block;
  5.   font-size: 200px;
  6.   color: rgba(0, 0, 0, 0.25);
  7.   height: 180px;
  8.   line-height: 1;
  9. }

  11. .time-part-wrapper {
  12.   display: inline-block;
  13.   margin-right: 50px;
  14.   position: relative;
  15. }
  16. .time-part-wrapper:not(:last-child):after {
  17.   content: ":";
  18.   display: block;
  19.   width: 30px;
  20.   height: 230px;
  21.   position: absolute;
  22.   top: 0px;
  23.   right: -30px;
  24.   color: rgba(0, 0, 0, 0.25);
  25.   font-size: 200px;
  26.   line-height: 0.9;
  27. }

  29. .time-part {
  30.   width: 140px;
  31.   text-align: center;
  32.   height: 180px;
  33.   overflow: hidden;
  34.   display: inline-block;
  35.   margin-left: -5px;
  36.   box-sizing: border-box;
  37. }
  38. .time-part .digit-wrapper {
  39.   animation-timing-function: cubic-bezier(1, 0, 1, 0);
  40. }
  41. .time-part.minutes.tens .digit-wrapper {
  42.   animation-name: minutes-tens;
  43.   animation-duration: 3600s;
  44.   animation-iteration-count: 1;
  45. }
  46. .time-part.minutes.ones .digit-wrapper {
  47.   animation-name: minutes-ones;
  48.   animation-duration: 600s;
  49.   animation-iteration-count: 6;
  50. }
  51. .time-part.seconds.tens .digit-wrapper {
  52.   animation-name: seconds-tens;
  53.   animation-duration: 60s;
  54.   animation-iteration-count: 60;
  55. }
  56. .time-part.seconds.ones .digit-wrapper {
  57.   animation-name: seconds-ones;
  58.   animation-duration: 10s;
  59.   animation-iteration-count: 360;
  60. }
  61. .time-part.hundredths.tens .digit-wrapper {
  62.   animation-name: hundredths-tens;
  63.   animation-duration: 1s;
  64.   animation-iteration-count: 3600;
  65. }
  66. .time-part.hundredths.ones .digit-wrapper {
  67.   animation-name: hundredths-ones;
  68.   animation-duration: 0.1s;
  69.   animation-iteration-count: 36000;
  70. }

  72. @keyframes minutes-tens {
  73.   0% {
  74.     transform: translateY(-180px);
  75.   }
  76.   16.66667% {
  77.     transform: translateY(-360px);
  78.   }
  79.   33.33333% {
  80.     transform: translateY(-540px);
  81.   }
  82.   50% {
  83.     transform: translateY(-720px);
  84.   }
  85.   66.66667% {
  86.     transform: translateY(-900px);
  87.   }
  88.   83.33333% {
  89.     transform: translateY(-1080px);
  90.   }
  91. }
  92. @keyframes minutes-ones {
  93.   0% {
  94.     transform: translateY(-180px);
  95.   }
  96.   10% {
  97.     transform: translateY(-360px);
  98.   }
  99.   20% {
  100.     transform: translateY(-540px);
  101.   }
  102.   30% {
  103.     transform: translateY(-720px);
  104.   }
  105.   40% {
  106.     transform: translateY(-900px);
  107.   }
  108.   50% {
  109.     transform: translateY(-1080px);
  110.   }
  111.   60% {
  112.     transform: translateY(-1260px);
  113.   }
  114.   70% {
  115.     transform: translateY(-1440px);
  116.   }
  117.   80% {
  118.     transform: translateY(-1620px);
  119.   }
  120.   90% {
  121.     transform: translateY(-1800px);
  122.   }
  123. }
  124. @keyframes seconds-tens {
  125.   0% {
  126.     transform: translateY(-180px);
  127.   }
  128.   16.66667% {
  129.     transform: translateY(-360px);
  130.   }
  131.   33.33333% {
  132.     transform: translateY(-540px);
  133.   }
  134.   50% {
  135.     transform: translateY(-720px);
  136.   }
  137.   66.66667% {
  138.     transform: translateY(-900px);
  139.   }
  140.   83.33333% {
  141.     transform: translateY(-1080px);
  142.   }
  143. }
  144. @keyframes seconds-ones {
  145.   0% {
  146.     transform: translateY(-180px);
  147.   }
  148.   10% {
  149.     transform: translateY(-360px);
  150.   }
  151.   20% {
  152.     transform: translateY(-540px);
  153.   }
  154.   30% {
  155.     transform: translateY(-720px);
  156.   }
  157.   40% {
  158.     transform: translateY(-900px);
  159.   }
  160.   50% {
  161.     transform: translateY(-1080px);
  162.   }
  163.   60% {
  164.     transform: translateY(-1260px);
  165.   }
  166.   70% {
  167.     transform: translateY(-1440px);
  168.   }
  169.   80% {
  170.     transform: translateY(-1620px);
  171.   }
  172.   90% {
  173.     transform: translateY(-1800px);
  174.   }
  175. }
  176. @keyframes hundredths-tens {
  177.   0% {
  178.     transform: translateY(-180px);
  179.   }
  180.   10% {
  181.     transform: translateY(-360px);
  182.   }
  183.   20% {
  184.     transform: translateY(-540px);
  185.   }
  186.   30% {
  187.     transform: translateY(-720px);
  188.   }
  189.   40% {
  190.     transform: translateY(-900px);
  191.   }
  192.   50% {
  193.     transform: translateY(-1080px);
  194.   }
  195.   60% {
  196.     transform: translateY(-1260px);
  197.   }
  198.   70% {
  199.     transform: translateY(-1440px);
  200.   }
  201.   80% {
  202.     transform: translateY(-1620px);
  203.   }
  204.   90% {
  205.     transform: translateY(-1800px);
  206.   }
  207. }
  208. @keyframes hundredths-ones {
  209.   0% {
  210.     transform: translateY(-180px);
  211.   }
  212.   10% {
  213.     transform: translateY(-360px);
  214.   }
  215.   20% {
  216.     transform: translateY(-540px);
  217.   }
  218.   30% {
  219.     transform: translateY(-720px);
  220.   }
  221.   40% {
  222.     transform: translateY(-900px);
  223.   }
  224.   50% {
  225.     transform: translateY(-1080px);
  226.   }
  227.   60% {
  228.     transform: translateY(-1260px);
  229.   }
  230.   70% {
  231.     transform: translateY(-1440px);
  232.   }
  233.   80% {
  234.     transform: translateY(-1620px);
  235.   }
  236.   90% {
  237.     transform: translateY(-1800px);
  238.   }
  239. }
  240. body {
  241.   background: #F1614B;
  242.   margin: 0;
  243.   font-family: "Aldrich";
  244. }

  246. .wrapper {
  247.   margin: 100px auto;
  248.   width: 1000px;
  249.   position: relative;
  250. }
  251. .wrapper:before, .wrapper:after {
  252.   content: "";
  253.   display: block;
  254.   position: absolute;
  255.   width: 100%;
  256.   left: 0;
  257.   height: 20px;
  258.   z-index: 10;
  259. }
  260. .wrapper:before {
  261.   top: 0px;
  262.   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  263.   background-size: 100%;
  264.   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0)));
  265.   background-image: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  266.   background-image: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  267.   background-image: linear-gradient(to bottom, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  268. }
  269. .wrapper:after {
  270.   bottom: 0px;
  271.   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  272.   background-size: 100%;
  273.   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b));
  274.   background-image: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  275.   background-image: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  276.   background-image: linear-gradient(to bottom, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  277. }
复制代码


回复

举报

返回列表
快速回复 返回顶部 返回列表