用CSS3+HTML实现简单的倒计时的代码是什么-群英

上一篇：CSS页面留白缩小，其他内容区域不变的效果怎样做下一篇：CSS中实现元素垂直居中的不同情况及方法是什么

这篇文章主要介绍“用CSS3+HTML实现简单的倒计时的代码是什么”的相关知识，下面会通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“用CSS3+HTML实现简单的倒计时的代码是什么”文章能帮助大家解决问题。

实现效果

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+HTML实现简单的倒计时的代码是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！