[分享]css元旦倒计时代码

元旦倒计时是网页常见的设计之一，主要使用 CSS 实现。下面我们来看一下如何使用 CSS 实现元旦倒计时效果。.time { fontsize: 2rem; / 设置字体大小 / textalign:...

元旦倒计时是网页常见的设计之一，主要使用 CSS 实现。下面我们来看一下如何使用 CSS 实现元旦倒计时效果。

.time {
  font-size: 2rem; /* 设置字体大小 */
  text-align: center; /* 设置文本居中 */
  color: #fff; /* 设置字体颜色 */
  background-color: #333; /* 设置背景颜色 */
  padding: 0.5rem; /* 设置内边距 */
}

.time span {
  display: inline-block; /* 把 span 元素变成行内块元素 */
  width: 2rem; /* 设置宽度 */
  height: 2rem; /* 设置高度 */
  margin: 0 0.5rem; /* 设置外边距 */
  border-radius: 50%; /* 设置圆角 */
  background-color: #fff; /* 设置背景颜色 */
}

/* 倒计时开始 */
.time span:nth-child(1) { /* 天 */
  animation: time1 1s linear infinite;
}

.time span:nth-child(2) { /* 小时 */
  animation: time2 1s linear infinite;
}

.time span:nth-child(3) { /* 分钟 */
  animation: time3 1s linear infinite;
}

.time span:nth-child(4) { /* 秒钟 */
  animation: time4 1s linear infinite;
}

/* 设置动画 */
@keyframes time1 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes time2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes time3 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes time4 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
} 

以上就是使用 CSS 实现元旦倒计时效果的所有代码，通过 CSS 设置元素样式和动画效果，我们可以快速地实现一个漂亮、简洁、实用的网页倒计时效果。