CSS3 achieves conic-gradient effect

grammar:

background-image: conic-gradient(from angle at position, start-color, ..., last-color )

First parameter:

from angle: starting angle, optional, default is from top to bottom

position: the position of the cone point

Second parameter:

start-color : defines the start color

stop-color : defines the end color

1. The first parameter

Likewise, the first parameter can be empty, the default angle is 0 degrees, and the cone center is the center point of the shape. For example:

background-image: conic-gradient(#69f, #fd44ff); 

We can change the starting angle, such as:

background-image: conic-gradient(from -90deg, #69f, #fd44ff); 

Change the cone center position:

background-image: conic-gradient(from -90deg at 80px 120px, #69f, #fd44ff) 

2. The second parameter

Like linear and radial gradients, you can set the color and the starting position of the gradient. The position parameters accepted are percentage and angle. For example:

background-image: conic-gradient(#69f 10%, #fd44ff 10%);

The above code is equivalent to:

background-image: conic-gradient(#69f 36deg, #fd44ff 36deg);

The display effect is as follows:

3. Repeat the cone gradient

Like linear and radial gradients, conic gradients also have the property of repeating.

background-image: repeating-conic-gradient(#69f 0 36deg, #fd44ff 36deg 72deg);

The effect is as shown below:

Does this rendering look a little familiar?

Let's set it to a circle and add a button, and it will become a lottery disc.

The effect is as follows:

Address: https://codepen.io/jianxiujiucan/pen/bGddbez

We can use cones to create a variety of loading effects:

Address: https://codepen.io/jianxiujiucan/pen/bGdGyKN

For the second loading, please study it yourself and write some exercises~

We can use gradients to create a variety of effects.

Summarize

The above is the editor's introduction to the conic-gradient effect achieved with CSS3. I hope it will be helpful to everyone!