前端 - 这个外圈渐变效果能否用纯css实现？

Question

纯css无法实现的话说说其他方法

Answer 1

自問自答吧，上面幾個答案沒懂我的意思，動畫效果的那個比較接近我想要的，最後還是codepen上搜找到了差不多的demo，一個台灣人寫的：
鏈接描述

思路很簡單，寫6個p，每個代表一段漸變，透過linear-gradient的角度和css3的skew把6個p拼成如下樣子：

然後裁出一個圓環就行了.
唯一不太清楚的是漸變的透明度為什麼是12%到88%，不知道有什麼特別用意，知道的各位還請指教一下。

---

還有個坑爹的東西，移動端使用漸變要注意兼容性，linear-gradient和帶瀏覽器前綴比如-webkit-的角度標準不一樣，一個是順時針一個是逆時針，我的安卓支持-webkit-linear-gradient，不支援linear-gradient。
連結描述

Answer 2

用CSS可以實現：
1、做一個空的正方形的p；
2、將p的偽元素after和before設定為p的一半高和一樣寬，這樣就相當於在p裡上下各有一個半高的塊元素；
3、分別根據需要的顏色設置這after和before的漸變；
4、通過這是border-radius將after和before設置成半圓；
5.在p正中間放置一個小一點塊元素，透過border-radius設定成圓。

範例如下：
HTML

<p class="loading"><p class='loading-indicator'><i></i></p>

CSS

.loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #eee
}

.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    width: 50px;
    height: 50px;
}

.loading-indicator:before {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-bottom: 0;
    box-sizing: border-box;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #999, #bbb);
}

.loading-indicator:after {
    content: "";
    display: block;
    width: 50px;
    height: 25px;
    padding-top: 0;
    box-sizing: border-box;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background: -webkit-linear-gradient(0deg, #eee, #bbb);
}

.loading-indicator>i {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    background: #eee;
    top: 5px;
    left: 5px;
    border-radius: 20px;
}

如果需要的話還可以再加上動畫。

PS：
還有一種利用background-clip取代中間那個i元素的方法。但是這種方法在android的微信上有問題，中間不是圓的。

Answer 3

codepen原始碼 連結描述
效果如下，會有轉圈效果，顏色也是一直在變。

Answer 4

可以用CSS3和漸變慢慢調整顏色，看看能不能盡量還原

Answer 5

比較麻煩。

實現圓環還是簡單的，麻煩的是漸變。
css3的漸變要么是沿著直線的方向的線性漸變，要么是從圓心向外一圈一圈的徑向漸變，還沒有沿著圓弧方向的漸變。

也許用svg可以實現，沒試過不知道了。

Answer 6

css3可以