CSS3 conic gradient conic-gradient

Time:2022-9-23

Note: Take out the cone separately for easy search
grammar:

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

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

Similarly, the first parameter can be empty, the default angle is0deg, the center of the cone is shapedcenter point. E.g:

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

CSS3 conic gradient conic-gradient

We can change the starting angle like:

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

CSS3 conic gradient conic-gradient

Change the position of the cone center:

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

CSS3 conic gradient conic-gradient

2. The second parameter

As with linear and radial gradients, you can set the color and the starting position of the gradient. The accepted parameters for position are percentage and angle. E.g:

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:
CSS3 conic gradient conic-gradient

3. Repeat Conic Gradient

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

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

The effect is as shown in the figure:
CSS3 conic gradient conic-gradient

Does this rendering look a little familiar?

Let’s set it to a circle, add a button, and it’s a lottery disc.
The effect is as follows:

CSS3 conic gradient conic-gradient

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

We can do various loading effects with cones:

CSS3 conic gradient conic-gradient
address:https://codepen.io/jianxiujiucan/pen/bGdGyKN

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

We can use gradients to draw all kinds of effects.
For example letter:
CSS3 conic gradient conic-gradient

https://codepen.io/jianxiujiucan/pen/gOppOdP

Recommended Today

Algorithm competition – storage and traversal of trees and graphs

First, the storage method of trees and graphs Tree (acyclic connected graph), graph storage: ​ Directed graph:a —> b ​ Undirected graph:a —> b,b —> a Undirected graphs can be thought of as special directed graphs! 1. Adjacency Matrix Dense graphs are generally stored using adjacency matrices, and the space complexity reaches (n * n) […]