css年月日3个圆环

CSS可以实现很多酷炫的效果，比如这个由年、月、日三个圆环所构成的日期选择器。

/* 父容器 */.date-picker {
      display: flex;
      align-items: center;
      justify-content: center;
}
/* 圆环 */.circle {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 5px solid #ccc;
}
/* 进度条 */.progress {
      position: absolute;
      top: -5px;
      left: -5px;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 5px solid #f00;
      clip: rect(0, 55px, 110px, 0);
      transform: rotate(90deg);
}
/* 文字 */.text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 24px;
      font-weight: bold;
}
    

首先，我们需要一个父容器来让三个圆环排列在同一行中。父容器设置为flex布局，使三个圆环可以水平居中。

每个圆环都需要一个自身的圆环和进度条。圆环使用border-radius: 50%来实现，进度条使用position: absolute来绝对定位在圆环周围。进度条使用clip属性来将超出圆环范围的部分裁剪掉，使用transform: rotate(90deg)来将进度条的起点调整为三点钟方向。

最后，我们添加文字元素作为选中日期的展示。文字使用绝对定位，并使用transform: translate(-50%, -50%)来让其水平和垂直方向都居中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！