[分享]css倒计时效果

CSS倒计时效果一直是网页设计的一大亮点。倒计时可以用在各种场景中，比如秒杀活动、抢购活动、促销活动等等。要实现CSS倒计时效果，你需要用到pre标签。pre标签的作用是保留文本格式，使文本内容的格式...

CSS倒计时效果一直是网页设计的一大亮点。倒计时可以用在各种场景中，比如秒杀活动、抢购活动、促销活动等等。

要实现CSS倒计时效果，你需要用到pre标签。pre标签的作用是保留文本格式，使文本内容的格式、空格、回车等不会被忽略或变化。

.countdown {
  font-size: 2rem;
  text-align: center;
  font-weight: bold;
}

.countdown span {
  display: inline-block;
  margin-right: 0.6rem;
  background-color: #222;
  color: #fff;
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
}

.countdown span:last-child {
  margin-right: 0;
}

@keyframes count {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0);
  }
}

.countdown span::before {
  content: "";
  display: block;
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  z-index: -1;
  animation: count 1s linear infinite;
} 

代码中，.countdown是包裹倒计时文本的容器，其中的span标签为每个数字分别添加样式。@keyframes是CSS3的动画关键字，其中定义了一个关于数字旋转的动画。

通过这些CSS样式，我们就可以实现一款带有时分秒倒计时的效果，并以一个动态的数字旋转作为其特色。这种效果不仅美观，而且优秀的用户体验也得到了越来越多用户的喜爱。