grammar:
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! |
>>: Analysis of Facebook's Information Architecture
I used js to create a package for converting Chin...
MySQL is a relational database management system....
In order to save installation time, I used the of...
Because the data binding mechanism of Vue and oth...
This article shares the specific method of instal...
Table of contents How to deploy MySQL service usi...
MySQL full text search Chinese solution Recently,...
Table of contents MySQL Client/Server Protocol If...
Table of contents 1 System Introduction 2 System ...
Ubuntu 16.04 builds FTP server Install ftp Instal...
Table of contents What is async? Why do we need a...
As shown below, if it were you, how would you ach...
Table of contents 1: Encapsulation idea 2. Packag...
Table of contents 1. Why use slots? 1.1 slot 1.2 ...
Preface I recently encountered a problem at work....