如何在 CSS 中创建双色环？

Question

我如何在CSS 和/或JS 中制作此设计中的戒指？

图标的数量是动态的。

• 第一个图标全为灰色
• 介于灰色和蓝色之间的图标
• 最后一个图标是蓝色渐变

要求环是动态的；不是图像的一部分。

Answer 1

您可以在背景中创建比实际元素具有额外高度和宽度的伪元素（:before）。然后使用conic-gradient 作为该伪元素的背景。

查看以下示例：

.knob {
  position: relative;
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.knob:before {
    content: ' ';
    position: absolute;
    display: block;
    top: -5px;
    left: -5px;
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 50%;
    background-image: conic-gradient(#006, #00f 25%, #888 0);
    transition: transform .5s ease-in-out;
    z-index: -2;
}

<div class="knob">25%</div>

有关自定义选项，请查看下面的 CodePen 链接。

https://codepen.io/rohitutekar/pen/BadOgmg

Answer 2

使用圆锥、径向和线性渐变以及伪元素，您可以像在这个 sn-p 中那样构建元素。

可以通过设置一个在这个 sn-p 中称为 --pc 的 CSS 属性（变量）来设置一个元素要显示的“完成”百分比（通过 JS 或 PHP 或您正在使用的任何东西）。

CSS 然后可以计算圆锥渐变所需的度数，以覆盖“环”的所需部分。

中间的图标可以通过 CSS 掩码属性引入，并且具有线性渐变背景，它将采用与环中对应的相同渐变颜色。

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: space-around;
  align-items: center;
  background: black;
}

.partCircle {
  position: relative;
  --lighterBlue: #3490ef;
  --darkerBlue: #304088;
  --gray: #484848;
  --deg: calc(360 * (100 - var(--pc)) / 100);
  --seg: calc((360 - var(--deg)) * 1deg);
  height: 6vw;
  width: 6vw;
  border-radius: 50%;
  background-image: radial-gradient(black 0 65%, transparent 65% 100%), conic-gradient(transparent 0 var(--seg), var(--gray) var(--seg) 360deg), conic-gradient(var(--lighterBlue) 0deg, var(--darkerBlue) 180deg, var(--lighterBlue) 360deg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.partCircle::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(var(--lighterBlue), var(--darkerBlue));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  mask-image: var(--icon);
  mask-size: 60%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: 60%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

<div class="container">
  <div class="partCircle" style="--pc: 25; --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);"></div>
  <div class="partCircle" style="--pc: 50; --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);"></div>
  <div class="partCircle" style="--pc: 62.5; --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);"></div>
  <div class="partCircle" style="--pc: 75; --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);"></div>
  <div class="partCircle" style="--pc: 87.5; --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);"></div>
  <div class="partCircle" style="--pc: 100; --icon: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/sun.svg);"></div>
</div>

Answer 3

使用边框图片

border-image: linear-gradient(to right, darkblue, darkorchid) 1;

请看下面的例子。

.btn-gradient-1 {
  background-color:transparent;
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

<div class="padding-x-md padding-y-xl flex flex-center">
  <div class="text-center">
    <div class="margin-bottom-xs">
      <button class="reset btn-gradient-1">Button One</button>
    </div>
  </div>
</div>

编辑：在您的情况下，您可能希望使用border-radius:50% 为按钮提供相同的高度和宽度以使其变圆。

我希望这会有所帮助。