怎样用CSS3写一个倒计时效果？现在很多网站都会使用倒计时效果，尤其是电子商务网站，常能看到秒杀倒计时，抢购倒计时等等，那么倒计时效果要怎么实现呢？这篇文章就给大家分享如何实现一个简单倒计时效果的实例，感兴趣的朋友可以看一下。

        实现效果

        实现代码

        html

<div class='wrapper'>
  <div class='time-part-wrapper'>
    <div class='time-part minutes tens'>
      <div class='digit-wrapper'>
        <span class='digit'>0</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div class='time-part minutes ones'>
      <div class='digit-wrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
  <div class='time-part-wrapper'>
    <div class='time-part seconds tens'>
      <div class='digit-wrapper'>
        <span class='digit'>0</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div class='time-part seconds ones'>
      <div class='digit-wrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
  <div class='time-part-wrapper'>
    <div class='time-part hundredths tens'>
      <div class='digit-wrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
    <div class='time-part hundredths ones'>
      <div class='digit-wrapper'>
        <span class='digit'>0</span>
        <span class='digit'>9</span>
        <span class='digit'>8</span>
        <span class='digit'>7</span>
        <span class='digit'>6</span>
        <span class='digit'>5</span>
        <span class='digit'>4</span>
        <span class='digit'>3</span>
        <span class='digit'>2</span>
        <span class='digit'>1</span>
        <span class='digit'>0</span>
      </div>
    </div>
  </div>
</div>

css

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

.time-part-wrapper {
  display: inline-block;
  margin-right: 50px;
  position: relative;
}
.time-part-wrapper: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: 180px;
  overflow: hidden;
  display: inline-block;
  margin-left: -5px;
  box-sizing: border-box;
}
.time-part .digit-wrapper {
  animation-timing-function: cubic-bezier(1, 0, 1, 0);
}
.time-part.minutes.tens .digit-wrapper {
  animation-name: minutes-tens;
  animation-duration: 3600s;
  animation-iteration-count: 1;
}
.time-part.minutes.ones .digit-wrapper {
  animation-name: minutes-ones;
  animation-duration: 600s;
  animation-iteration-count: 6;
}
.time-part.seconds.tens .digit-wrapper {
  animation-name: seconds-tens;
  animation-duration: 60s;
  animation-iteration-count: 60;
}
.time-part.seconds.ones .digit-wrapper {
  animation-name: seconds-ones;
  animation-duration: 10s;
  animation-iteration-count: 360;
}
.time-part.hundredths.tens .digit-wrapper {
  animation-name: hundredths-tens;
  animation-duration: 1s;
  animation-iteration-count: 3600;
}
.time-part.hundredths.ones .digit-wrapper {
  animation-name: hundredths-ones;
  animation-duration: 0.1s;
  animation-iteration-count: 36000;
}

@keyframes minutes-tens {
  0% {
    transform: translateY(-180px);
  }
  16.66667% {
    transform: translateY(-360px);
  }
  33.33333% {
    transform: translateY(-540px);
  }
  50% {
    transform: translateY(-720px);
  }
  66.66667% {
    transform: translateY(-900px);
  }
  83.33333% {
    transform: translateY(-1080px);
  }
}
@keyframes minutes-ones {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
@keyframes seconds-tens {
  0% {
    transform: translateY(-180px);
  }
  16.66667% {
    transform: translateY(-360px);
  }
  33.33333% {
    transform: translateY(-540px);
  }
  50% {
    transform: translateY(-720px);
  }
  66.66667% {
    transform: translateY(-900px);
  }
  83.33333% {
    transform: translateY(-1080px);
  }
}
@keyframes seconds-ones {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
@keyframes hundredths-tens {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
@keyframes hundredths-ones {
  0% {
    transform: translateY(-180px);
  }
  10% {
    transform: translateY(-360px);
  }
  20% {
    transform: translateY(-540px);
  }
  30% {
    transform: translateY(-720px);
  }
  40% {
    transform: translateY(-900px);
  }
  50% {
    transform: translateY(-1080px);
  }
  60% {
    transform: translateY(-1260px);
  }
  70% {
    transform: translateY(-1440px);
  }
  80% {
    transform: translateY(-1620px);
  }
  90% {
    transform: translateY(-1800px);
  }
}
body {
  background: #F1614B;
  margin: 0;
  font-family: "Aldrich";
}

.wrapper {
  margin: 100px auto;
  width: 1000px;
  position: relative;
}
.wrapper:before, .wrapper:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  height: 20px;
  z-index: 10;
}
.wrapper:before {
  top: 0px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI

+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvc

j0iI2YxNjE0YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGV

pZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f1614b), color-stop(100%, rgba(241, 97, 75, 0)));
  background-image: -moz-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  background-image: -webkit-linear-gradient(top, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
  background-image: linear-gradient(to bottom, #f1614b 0%, rgba(241, 97, 75, 0) 100%);
}
.wrapper:after {
  bottom: 0px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI

+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvc

j0iI2YxNjE0YiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMTYxNGIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGV

pZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 97, 75, 0)), color-stop(100%, #f1614b));
  background-image: -moz-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  background-image: -webkit-linear-gradient(top, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
  background-image: linear-gradient(to bottom, rgba(241, 97, 75, 0) 0%, #f1614b 100%);
}

        以上就是用css3实现倒计时效果的介绍，有需要的朋友可以参考参考上述代码，想要了解更多css3实现倒计时效果内容大家可以继续关注其他文章。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS页面是怎样实现响应式布局的，代码是什么

  这篇文章主要介绍了CSS网页响应式布局实现自动适配Pc/Pad/Phone设备,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• AmazeUi如何实现简单的Tree树形结构，代码是什么

  这篇文章主要介绍了AmazeUi Tree(树形结构) 应用总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• AmazeUI中怎样结合网格实现排序整齐的缩略图效果

  这篇文章主要介绍了AmazeUI 缩略图的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中before和after怎样使用呢

  CSS技术中，想要灵活运用:before和:after，我们可以用什么方法呢！一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• CSS中order属性用于做什么，语法怎么写

  order可以改变一个flex子项的排序位置。order属性用于提供有关弹性容器中其他弹性项目的每个弹性项目的顺序。 如果商品不灵活，那么order属性将毫无用处。