CSS3 achieves conic-gradient effect

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!

<<:  How to Use rsync in Linux

>>:  Analysis of Facebook's Information Architecture

Recommend

Implementation of vertical centering with unknown height in CSS

This article mainly introduces the implementation...

Several techniques for playing sounds with CSS

CSS is the realm of style, layout, and presentati...

Design Theory: A Method to Understand People's Hearts

<br />Once, Foyin and Mr. Dongpo were chatti...

Semantics, writing, and best practices of link A

The semantics, writing style, and best practices ...

How to use gdb to debug core files in Linux

1.core file When a Segmentation fault (core dumpe...

5 tips for writing CSS to make your style more standardized

1. Arrange CSS in alphabetical order Not in alphab...

The most common mistakes in HTML tag writing

We better start paying attention, because HTML Po...

Examples of correct use of maps in WeChat mini programs

Table of contents Preface 1. Preparation 2. Actua...

Detailed explanation of how to synchronize data from MySQL to Elasticsearch

Table of contents 1. Synchronization Principle 2....

Writing and understanding of arrow functions and this in JS

Table of contents Preface 1. How to write functio...

A brief introduction to JavaScript arrays

Table of contents Introduction to Arrays Array li...

Detailed steps for creating a Vue scaffolding project

vue scaffolding -> vue.cli Quickly create a la...

Detailed explanation of Linux one-line command to process batch files

Preface The best method may not be the one you ca...