这篇文章主要介绍了CSS3 实现倒计时效果的示例代码,帮助大家更好的理解和使用CSS3,感兴趣的朋友可以了解下
实现效果
html
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
css
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 }