[分享]css3实现沙漏倒计时

沙漏倒计时是一个非常酷炫的特效，而CSS3可以很方便地实现它。下面是实现沙漏倒计时的CSS3代码：/ 设置沙漏的大小和位置 / .sandglass { width: 100px; height: 2...

沙漏倒计时是一个非常酷炫的特效，而CSS3可以很方便地实现它。下面是实现沙漏倒计时的CSS3代码：

/* 设置沙漏的大小和位置 */
.sandglass {
  width: 100px;
  height: 200px;
  position: relative;
}
/* 设置沙漏的样式 */
.sandglass:before,
.sandglass:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 100px solid transparent;
  border-bottom-color: #333; /* 设置沙漏的颜色 */
  transform: rotate(180deg); /* 将上面的三角形旋转180度，获得完整的沙漏形状 */
}
/* 设置沙漏的中间区域（即计时部分）的样式 */
.sandglass .middle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 100%;
  height: 100px;
  background-color: #333; /* 设置计时部分的颜色 */
}
/* 设置沙漏的计时数字的样式 */
.sandglass .middle span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4em;
  font-weight: bold;
  color: #fff; /* 设置数字的颜色 */
}
/* 设置数字的动画效果 */
.sandglass .middle span:first-child {
  animation: countdown 5s linear infinite;
}
.sandglass .middle span:last-child {
  animation: countdown 5s linear infinite reverse;
}
/* 定义动画 */
@keyframes countdown {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
} 

以上代码实现了一个沙漏倒计时，其中沙漏的颜色、计时部分的颜色、数字的颜色和动画效果，都可以根据需要进行调整。