css实现倒计时圆环

css实现倒计时圆环的的原理，其实就是通过css的overflow以及旋转来实现

1. 结构

首先，是左侧和右侧的半圆，拼接成一个完整的圆形，然后由一个小一圈的圆形对中间部分进行遮罩，就形成了一个圆环

import './index.less';

export default function IndexPage({ second = 4 }) {
  return (
    <div className="box">
      {/* 左半边 */}
      <div className="left_box">
        {/* 左侧半圆 */}
        <div
          className="left_item"
          style={{ animationDuration: `${second}s` }}
        ></div>
      </div>
      {/* 右半边 */}
      <div className="right_box">
        {/* 右侧半圆 */}
        <div
          className="right_item"
          style={{ animationDuration: `${second}s` }}
        ></div>
      </div>
      {/* 中间部分，对非圆环部分进行遮罩 */}
      <div className="mask"></div>
    </div>
  );
}

2. css样式

.box {
  /* 最外层的盒子 */
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  // background-color: #FF8301;
  border: none;
  padding: 0;
}

.left_box,
.right_box {
  /*
    左右两边用于 隐藏 旋转的div的盒子
    通过overflow来隐藏内部div旋转出去的部分
  */
  position: absolute;
  top: 0;
  width: 24px;
  height: 48px;
  overflow: hidden;
  z-index: 0;
  border: none;
  padding: 0;
}

.left_box {
  left: 0px;
}

.right_box {
  right: 0px;
}

.left_item,
.right_item {
  /* 
   这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
  */
  width: 24px;
  height: 48px;
  background-color: #FF8301;
  border: none;
  padding: 0;
}

.left_item {
  /*
   1.设置圆角，圆角大小为高度的一半
   2.这只旋转的中心店，这是左边圆，中心点设置到右边中心点，右边圆则设置到左边中心点
   */
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  transform-origin: right center;
  animation-name: loading_left;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.right_item {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  transform-origin: left center;
  animation-name: loading_right;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.mask {
  /* 遮住div多余的部分，呈现出线条的效果 */
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  z-index: 0;
  border-radius: 50%;
  background-color: rgb(252 247 227);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  white-space: nowrap;
}

@keyframes loading_right {
  0% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(360deg);

  }
}

@keyframes loading_left {
  0% {
    transform: rotate(180deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}