CSS3實現原型進度條效果

今天早上在群裡看到有同學問如何用 CSS3 實現以下效果？

一開始我覺得 CSS3 搞不出來這種效果的吧，主要是白色透明那個地方，後來靈機一動想到了漸變至透明色（不考慮相容性的情況）應該是可以做出來的。如果你對 CSS3 比較熟悉的話，那麼你應該對漸變效果 linear-gradient 也不陌生，不瞭解的同學可以去查閱。

首先我們對這個結構進行一下拆分，看下圖所示：

有的同學一看到這張圖就已經知道該怎麼做了，對，就是用 border-radius + 遮罩。先用 border-radius 做一個圓出來，再加上線性漸變色，中間部分用偽類也做一個圓，定位過去蓋上，於是就有了外面的空心圓，即下圖所示：

程式碼如下：

.box1 {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  background-image: linear-gradient(
    60deg,
    #f79533,
    #f37055,
    #ef4e7b,
    #a166ab,
    #5073b8,
    #1098ad,
    #07b39b,
    #6fba82);
  background-image: linear-gradient(
    60deg,
    #f79533,
    #f37055,
    #ef4e7b,
    #a166ab,
    #5073b8,
    #1098ad,
    #07b39b,
    #6fba82);
}
.box1:after {
  width: 90px;
  height: 90px;
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: #fff;
  content: ' ';
  border-radius: 50%;
}
.box1:before {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  content: ' ';
  background-image: -webkit-linear-gradient(right top, white 60%, transparent);
  background-image:linear-gradient(right top, white 60%, transparent);
}

接下來就是最重要的一步了，用線性漸變畫出遮罩層，直接上程式碼吧：

.box1:before {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  content: ' ';
  background-image: -webkit-linear-gradient(right top, white 60%, transparent);
  background-image:linear-gradient(right top, white 60%, transparent);
}

這樣一來我們就實現了上面的效果，完整程式碼如下：

最終效果圖：

原文地址：