CSS3 如何实现倒计时效果

实现效果

html

%div.wrapper
  %div.time-part-wrapper
    %div.time-part.minutes.tens
      %div.digit-wrapper
        %span.digit 0
        - (-5..0).each do |i|
          %span.digit= -i
    %div.time-part.minutes.ones
      %div.digit-wrapper
        %span.digit 0
        - (-9..0).each do |i|
          %span.digit= -i

  %div.time-part-wrapper
    %div.time-part.seconds.tens
      %div.digit-wrapper
        %span.digit 0
        - (-5..0).each do |i|
          %span.digit= -i
    %div.time-part.seconds.ones
      %div.digit-wrapper
        %span.digit 0
        - (-9..0).each do |i|
          %span.digit= -i
          
  %div.time-part-wrapper
    %div.time-part.hundredths.tens
      %div.digit-wrapper
        %span.digit 0
        - (-9..0).each do |i|
          %span.digit= -i
    %div.time-part.hundredths.ones
      %div.digit-wrapper
        %span.digit 0
        - (-9..0).each do |i|
          %span.digit= -i

css

@import "compass/css3";

/* Play with speed and easing of the animation */
$one-second: 1s;
$easing: cubic-bezier(1,0,1,0);
/* =========================================== */

@mixin animate($count) {
  $step: (100 / $count);
  $progress: 0%;
  $translate: -$digit-height;
  @while $progress < 100 {
    #{$progress} { transform: translateY($translate); }
    $progress: $progress + $step;
    $translate: $translate - $digit-height;
  }
}

$digit-height: 180px;

.digit {
  display: inline-block;
  font-size: 200px;
  color: rgba(0,0,0,0.25);
  height: $digit-height;
  line-height: 1;
}

.time-part-wrapper {
  display: inline-block;
  margin-right: 50px;
  position: relative;

  &:not(:last-child):after {
    content: ":";
    display: block;
    width: 30px;
    height: 230px;
    position: absolute;
    top: 0px;
    right: -30px;
    color: rgba(0,0,0,0.25);
    font-size: 200px;
    line-height: 0.9;
  }
}

.time-part {
  width: 140px;
  text-align: center;
  height: $digit-height;
  overflow: hidden;
  display: inline-block;
  margin-left: -5px;
  box-sizing: border-box;
  
  .digit-wrapper {
    animation-timing-function: $easing;
  }
  
  &.minutes {
    &.tens .digit-wrapper {
      animation-name: minutes-tens;
      animation-duration: $one-second * 10 * 6 * 10 * 6;
      animation-iteration-count: 1;
    }
    &.ones .digit-wrapper {
      animation-name: minutes-ones;
      animation-duration: $one-second * 10 * 6 * 10;
      animation-iteration-count: 6;
    }
  }
  
  &.seconds {
    &.tens .digit-wrapper {
      animation-name: seconds-tens;
      animation-duration: $one-second * 10 * 6;
      animation-iteration-count: 60;
    }
    &.ones .digit-wrapper {
      animation-name: seconds-ones;
      animation-duration: $one-second * 10;
      animation-iteration-count: 360;
    }
  }
  
  &.hundredths {
    &.tens .digit-wrapper {
      animation-name: hundredths-tens;
      animation-duration: $one-second;
      animation-iteration-count: 3600;
    }
    &.ones .digit-wrapper {
      animation-name: hundredths-ones;
      animation-duration: $one-second / 10;
      animation-iteration-count: 36000;
    }
  }
}

@keyframes minutes-tens {
  @include animate(6);
}
@keyframes minutes-ones {
  @include animate(10);
}

@keyframes seconds-tens {
  @include animate(6);
}
@keyframes seconds-ones {
  @include animate(10);
}

@keyframes hundredths-tens {
  @include animate(10);
}
@keyframes hundredths-ones {
  @include animate(10);
}

body {
  background: #F1614B;
  margin: 0;
  font-family: "Aldrich";
}

.wrapper {
  margin: 100px auto;
  width: 1000px;
  position: relative;
  
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    height: 20px;
    z-index: 10;
  }
  
  &:before {
    top: 0px;
    @include background-image(linear-gradient(top,  rgba(241,97,75,1) 0%,rgba(241,97,75,0) 100%));
  }
  
  &:after {
    bottom: 0px;
    @include background-image(linear-gradient(top,  rgba(241,97,75,0) 0%,rgba(241,97,75,1) 100%));
  }
}

以上就是CSS3 实现倒计时效果的详细内容，更多关于CSS3 倒计时的资料请关注其它相关文章！