Realization of conic gradient effect with CSS3

Time:2020-7-29

Grammar:

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

First parameter:

From angle: the starting angle; optional; the 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

Similarly, the first parameter can be null, the default angle is 0DEG, 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, for example:


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

As with linear and radial gradients, you can set the starting position of color and gradient. Position accepts parameters such as percentage and angle. For example:


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

The above codes are equivalent to:


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

The display effect is as follows:

3. Repeat taper gradient

Like linear and radial gradients, cone gradients also have duplicate properties.


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

The effect is as follows:

Is this rendering a little familiar?

Let’s set it into a circle and add a button to make it a lottery disk.

The results are as follows:

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

We can do all kinds of loading effects with cones:

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

Please study the second loading and write the exercises yourself~

We can use gradients to draw all kinds of effects.

summary

The above is a small series of CSS3 introduced to you to achieve conic gradient effect, I hope to help you!