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

Question

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

Answer 1

Ask and answer your own questions. I didn’t understand what I meant by the above answers. The one with animation effect is closer to what I want. In the end, I searched on codepen and found a similar demo, written by a Taiwanese:
Link Description

The idea is very simple. Write 6 p's, each representing a gradient. Use the angle of linear-gradient and the skew of css3 to spell the 6 p's as follows:

Then just cut out a ring.
The only thing I’m not sure about is why the transparency of the gradient is from 12% to 88%. I don’t know what the special purpose is. If you know, please give me some advice.

---

There is another cheating thing. When using gradients on the mobile terminal, you must pay attention to compatibility. Linear-gradient and angle standards with browser prefixes such as -webkit- are different. One is clockwise and the other is counterclockwise. My Android supports -webkit-linear-gradient, linear-gradient is not supported.
Link description

Answer 2

It can be realized with CSS:
1. Make an empty square p;
2. Set the pseudo-elements after and before of p to half the height and the same width of p, which is equivalent to p There is a half-height block element above and below;
3. Set the gradient of after and before respectively according to the required color;
4. Set after and before into semicircles through border-radius;
5. Place a smaller block element in the middle of p and set it to a circle through border-radius.

An example is as follows:
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;
}

Animation can be added if necessary.

PS:
There is also a way to use background-clip to replace the i element in the middle. But this method has a problem on Android WeChat, the middle is not round.

Answer 3

codepen source code link description
The effect is as follows, there will be a spinning effect, and the color will keep changing.

Answer 4

You can use CSS3 and gradient to slowly adjust the color and see if you can restore it as much as possible

Answer 5

More troublesome.

It’s easy to implement the ring, but the trouble is the gradient.
The gradient of CSS3 is either a linear gradient along a straight line, or a radial gradient from the center of the circle outwards, and there is no gradient along the arc direction.

Maybe it can be achieved using svg, I don’t know if I haven’t tried it.

Answer 6

css3 is OK