CSS3 实现倒计时效果

 1 %div.wrapper
 2   %div.time-part-wrapper
 3     %div.time-part.minutes.tens
 4       %div.digit-wrapper
 5         %span.digit 0
 6         - (-5..0).each do |i|
 7           %span.digit= -i
 8     %div.time-part.minutes.ones
 9       %div.digit-wrapper
10         %span.digit 0
11         - (-9..0).each do |i|
12           %span.digit= -i
13 
14   %div.time-part-wrapper
15     %div.time-part.seconds.tens
16       %div.digit-wrapper
17         %span.digit 0
18         - (-5..0).each do |i|
19           %span.digit= -i
20     %div.time-part.seconds.ones
21       %div.digit-wrapper
22         %span.digit 0
23         - (-9..0).each do |i|
24           %span.digit= -i
25           
26   %div.time-part-wrapper
27     %div.time-part.hundredths.tens
28       %div.digit-wrapper
29         %span.digit 0
30         - (-9..0).each do |i|
31           %span.digit= -i
32     %div.time-part.hundredths.ones
33       %div.digit-wrapper
34         %span.digit 0
35         - (-9..0).each do |i|
36           %span.digit= -i

  1 @import "compass/css3";
  2 
  3 /* Play with speed and easing of the animation */
  4 $one-second: 1s;
  5 $easing: cubic-bezier(1,0,1,0);
  6 /* =========================================== */
  7 
  8 @mixin animate($count) {
  9   $step: (100 / $count);
 10   $progress: 0%;
 11   $translate: -$digit-height;
 12   @while $progress < 100 {
 13     #{$progress} { transform: translateY($translate); }
 14     $progress: $progress + $step;
 15     $translate: $translate - $digit-height;
 16   }
 17 }
 18 
 19 $digit-height: 180px;
 20 
 21 .digit {
 22   display: inline-block;
 23   font-size: 200px;
 24   color: rgba(0,0,0,0.25);
 25   height: $digit-height;
 26   line-height: 1;
 27 }
 28 
 29 .time-part-wrapper {
 30   display: inline-block;
 31   margin-right: 50px;
 32   position: relative;
 33 
 34   &:not(:last-child):after {
 35     content: ":";
 36     display: block;
 37     width: 30px;
 38     height: 230px;
 39     position: absolute;
 40     top: 0px;
 41     right: -30px;
 42     color: rgba(0,0,0,0.25);
 43     font-size: 200px;
 44     line-height: 0.9;
 45   }
 46 }
 47 
 48 .time-part {
 49   width: 140px;
 50   text-align: center;
 51   height: $digit-height;
 52   overflow: hidden;
 53   display: inline-block;
 54   margin-left: -5px;
 55   box-sizing: border-box;
 56   
 57   .digit-wrapper {
 58     animation-timing-function: $easing;
 59   }
 60   
 61   &.minutes {
 62     &.tens .digit-wrapper {
 63       animation-name: minutes-tens;
 64       animation-duration: $one-second * 10 * 6 * 10 * 6;
 65       animation-iteration-count: 1;
 66     }
 67     &.ones .digit-wrapper {
 68       animation-name: minutes-ones;
 69       animation-duration: $one-second * 10 * 6 * 10;
 70       animation-iteration-count: 6;
 71     }
 72   }
 73   
 74   &.seconds {
 75     &.tens .digit-wrapper {
 76       animation-name: seconds-tens;
 77       animation-duration: $one-second * 10 * 6;
 78       animation-iteration-count: 60;
 79     }
 80     &.ones .digit-wrapper {
 81       animation-name: seconds-ones;
 82       animation-duration: $one-second * 10;
 83       animation-iteration-count: 360;
 84     }
 85   }
 86   
 87   &.hundredths {
 88     &.tens .digit-wrapper {
 89       animation-name: hundredths-tens;
 90       animation-duration: $one-second;
 91       animation-iteration-count: 3600;
 92     }
 93     &.ones .digit-wrapper {
 94       animation-name: hundredths-ones;
 95       animation-duration: $one-second / 10;
 96       animation-iteration-count: 36000;
 97     }
 98   }
 99 }
100 
101 @keyframes minutes-tens {
102   @include animate(6);
103 }
104 @keyframes minutes-ones {
105   @include animate(10);
106 }
107 
108 @keyframes seconds-tens {
109   @include animate(6);
110 }
111 @keyframes seconds-ones {
112   @include animate(10);
113 }
114 
115 @keyframes hundredths-tens {
116   @include animate(10);
117 }
118 @keyframes hundredths-ones {
119   @include animate(10);
120 }
121 
122 body {
123   background: #F1614B;
124   margin: 0;
125   font-family: "Aldrich";
126 }
127 
128 .wrapper {
129   margin: 100px auto;
130   width: 1000px;
131   position: relative;
132   
133   &:before, &:after {
134     content: "";
135     display: block;
136     position: absolute;
137     width: 100%;
138     left: 0;
139     height: 20px;
140     z-index: 10;
141   }
142   
143   &:before {
144     top: 0px;
145     @include background-image(linear-gradient(top,  rgba(241,97,75,1) 0%,rgba(241,97,75,0) 100%));
146   }
147   
148   &:after {
149     bottom: 0px;
150     @include background-image(linear-gradient(top,  rgba(241,97,75,0) 0%,rgba(241,97,75,1) 100%));
151   }
152 }